使用 javascript 在页面加载前隐藏 HTML 表单

Question

我想在使用 javascript 加载页面之前隐藏 HTML 表单。

我能够使用 display='none' 样式属性隐藏使用 javascript 的表单，但表单内容加载时可见消失前一秒。

var searchbar = document.getElementById("searchform");
searchbar.style.display = 'none';

我在 Whosebug 中阅读了很多解决方案，在页面中添加一些 css 代码，稍后使用 removeClass 显示内容。

问题是 我无法访问网页背后的代码来添加 CSS 内容。但是 我只能在页眉或页脚中添加一些自定义 javascript 代码。（也不能使用 jQuery）。

如果可以按预期隐藏表单元素，请告诉我。我对 javascripting 很陌生。请提供您宝贵的建议。

Answer 1

Web 浏览器首先呈现 HTML。这需要时间，而浏览器下载 css 或 js 文件。最好的方法是使用内联显示='none'，而不是在css 文件中。

<form style="display:none;">
   ...
</form>

Answer 2

您可以将所有表单存储在 javascript 变量中，并在页面准备就绪时将其写入 div

简单示例：

function showForm(){
    var container = $('#formContainer');
    var form = '<input type="text" name="myInput">'; // Or you can load it from an external file
    container.html(form);
}

$(document).ready(function(){

    showForm();

});

但最好的方法是添加一个 css 规则来隐藏您的表单，并在加载页面时显示它。

Answer 3

编辑：抱歉，如果您只能使用一些 javascript 而无法访问 html 或 css，那么您的问题可能没有解决方案。

使用 javascript 在页面加载前隐藏 HTML 表单

Hide HTML Form Before the page loads using javascript

html

javascript

forms

hide

display