我想在整个页面加载之前运行一些javascript。这可能吗?还是代码开始在上面执行</html>?
</html>
不仅 可以 ,但是你必须做出特别的努力, 不 ,如果你不想。:-)
当浏览器script在解析HTML时遇到标签时,它将停止解析并移交给运行脚本的Javascript解释器。在脚本执行完成之前,解析器不会继续(因为脚本可能会document.write调用解析器应处理的输出标记)。这是默认行为。有一些script标记属性可以更改该行为defer和async并且由于它们会更改行为,所以,加载了脚本defer或async不能用于document.write将HTML输出到正在加载的页面的脚本)。
script
document.write
defer
async
所以考虑一下:
<p>Line 1</p> <script> alert("Paragraphs: " + document.getElementsByTagName("p").length); </script> <p>Line 2</p>
如果您加载该页面,则警报将显示“段落:1”,因为p此时DOM中仅存在一个元素(包含“第1行”的元素)。您可能会或可能不会在浏览器显示中看到第1行,这取决于浏览器,因为即使该元素位于DOM中,浏览器也可能还没有时间 渲染 它(因为这alert使UI线程暂停了)。
p
alert
有些浏览器正在… 调整…的行为alert。例如,如果您在页面中包含该代码并在后台的新标签页中将其打开,则最新版本的Chrome浏览器将允许该页面继续加载(并允许JavaScript代码继续运行),并在您进入时显示警报标签,即使该标签处于活动状态时遇到该警报时的行为也大不相同。
无论是否已渲染它们,您都可以愉快地访问早期的元素,这就是为什么我们在上面看到“段落:1”的原因。这是另一个例子:
<p id='p1'>Line 1</p> <script> document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>"); document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>"); </script> <p id='p2'>Line 2</p>
您看到的输出是:
1号线 p1为空?没有 p2为空?是 2号线
…因为p1脚本运行时就存在,但p2不存在。
p1
p2