Question

我有一些动态页面，我想在页面完全呈现之前更改某些元素。

我的代码片段就像

document.body.getElementById("change").innerHTML = "<img src...";

我无权更改内容服务器端。

将代码放在其呈现的页面之前运行代码的最佳位置在哪里？

相反，是将javascript放在HEAD（在window.onload事件中？）还是在关闭BODY（不在事件监听器内）之前？

Answer 1

我担心您在页面呈现之前不太可能执行脚本。当然你可以放置一个内联脚本并让它在你想要的地方使用document.write（...）来显示你的内容，但这是一个可怕的解决方案。另外，你可以做的最好的是'DOM Ready'事件，尽管在所有浏览器上很难做到，你真的需要一个库来抽象细节。 jQuery提供了在DOM准备就绪时触发事件的现成方法，而不是在页面和所有资源完成加载时。

Answer 2

由于浏览器通常在解析后立即呈现元素，因此最好的方法是将代码直接放在引用元素之后的script元素中：

<div id="change"></div>
<script type="text/javascript">
    document.body.getElementById("change").innerHTML = "<img src...";
</script>

Answer 3

我不确定我是否正确理解你的问题，但是如果你在头部内部使用事件监听器（例如jQuery的$(document).ready()），你可以通过传递你的dom结构来改变元素。在事件触发时调用函数（handler）的片段。

<HEAD>
    //...
    <SCRIPT type="text/javascript">

        $(document).ready(function() {
            $("#change").append(
                $("<img src=\"...\">") 
            ) ;
        }) ;

    <SCRIPT>

</HEAD>

使用核心javascript，你必须为mozilla（W3C）和Internet Explorer事件规范分叉你的事件监听器。有大量关于如何在互联网上进行此操作的文档。

无论哪种方式，在这种情况下最好的办法显然是自己创建内容，而不是在渲染后更改内容。

Answer 4

AFAIK你不能这样做。因为在呈现页面之前不会有任何元素，并且您无法访问尚未加载到DOM树的元素。

Answer 5

如果您不想在更改DOM之前渲染任何元素，可以在body元素上设置CSS display: none，然后在完成后将其更改为display: block。

哪里是放置javascript代码段以在呈现页面之前更改页面的DOM的最佳位置

5 个答案: