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

Question

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

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

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

我已经阅读了许多堆栈溢出的解决方案，在页面中添加了一些 css 代码，稍后使用 removeClass 显示内容。

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

请让我知道是否可以按预期隐藏表单元素。我对javascripting很陌生。请提供您的宝贵建议。

Answer 1

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

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

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

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