6

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

我的片段是这样的：

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

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

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

相反，将 Javascript 放在 HEAD（window.onload事件内部？）或关闭 BODY（不在事件侦听器内部）之前是最优的吗？

4

5 回答 5

2

恐怕您不太可能在页面呈现之前执行您的脚本。当然，您可以放置​​一个内联脚本并让它在您希望它显示您的内容的地方使用 document.write(...)，但这是一个可怕的解决方案。或者你能做的最好的事情就是在“DOM Ready”事件中，虽然很难在所有浏览器上保持一致，但你确实需要一个库来抽象细节。jQuery 提供了它的 ready 方法来在 DOM 准备好时触发事件，而不是在页面和所有资源完成加载时触发。

于 2010-04-28T10:08:14.133 回答
1

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

<div id="change"></div>
<script type="text/javascript">
    document.body.getElementById("change").innerHTML = "<img src...";
</script>
于 2010-04-28T10:14:29.167 回答
1

不确定我是否正确理解了您的问题，但是如果您在头部使用事件侦听器（例如 jQuery 的$(document).ready()），一旦加载了 dom 结构，您将能够通过将您的代码段传递给handler被调用的函数（）来更改元素当事件触发时。

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

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

    <SCRIPT>

</HEAD>

使用核心 javascript，您必须为 mozilla (W3C) 和 Internet Explorer 事件规范分叉您的事件侦听器。互联网上有大量关于如何做到这一点的文档。

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

于 2010-04-28T11:29:03.790 回答
0

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

于 2010-04-28T10:06:06.747 回答
0

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

于 2017-05-15T08:05:52.323 回答