Chrome - <body onload=""> 不工作答案

【问题标题】：Chrome - <body onload=""> is not workingChrome - <body onload=""> 不工作
【发布时间】：2016-10-12 15:15:12
【问题描述】：

我知道

"Onload 在 DOM 完全加载时执行。这意味着它在之后执行页面的结尾。这在您想要执行某些任务时很有用文件已完全加载。”

但是为什么这些代码在chrome中不起作用（spBodyOnLoadWrapper是在“init.debug.js”中定义的一个函数，这个函数没有被调用）：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr">
    <head>
   <script type="text/javascript">
    document.write('<script type="text/javascript" src="/_layouts/1033/init.debug.js?rev=Cn3X2qRiBI8U52EFeStGwg%3D%3D"></' + 'script>');
     </script>
    </head> 
    <body scroll="no" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="v4master">
    </body>

这些 HTML 是由一个名为“SharePoint 2010”的微软产品生成的，丑陋，而不是“最佳实践”，但我必须让它在 chrome 中工作......

【问题讨论】：

哎呀...document.write 包含一个脚本？严重地？甚至不在<script> 标签内...
看起来没有理由使用document.write()。为什么不添加一个简单的script 标签呢？

标签： javascript

【解决方案1】：

document.write() 是 JavaScript 代码，因此它必须包含在 script 元素中。

【讨论】：

【解决方案2】：

我在您的 HTML 中发现了一些错误/不良做法：

首先，你必须将document.write语句包裹在script标签中，

其次，使用document.write 是不必要的（应该被认为是一种不好的做法）。您可以通过在head 或body 中放置script 标签来简单地将脚本添加到您的页面：

<script type="text/javascript" src="/_layouts/1033/init.debug.jsrev=Cn3X2qRiBI8U52EFeStGwg%3D%3D"></script>

如果你想动态指定脚本源，你可以创建一个script元素，设置它的源并添加到你的文档中：

<script type="text/javascript">
    var headElement = document.getElementsByTagName('head')[0],
        script = document.createElement('script');
    script.setAttribute('src', '/_layouts/1033/init.debug.jsrev=Cn3X2qRiBI8U52EFeStGwg%3D%3D');
    script.setAttribute('type', 'text/javascript');
    headElement.appendChild(script);
</script>

与其使用onload 属性，不如使用JavaScript 为load 事件添加一个EventListener：

window.addEventListener('load', function () {
    if (typeof(_spBodyOnLoadWrapper) != 'undefined') {
        _spBodyOnLoadWrapper();
    }
});

【讨论】：

这些 HTML 是由一个名为“SharePoint 2010”的微软产品生成的，丑陋，而不是“最佳实践”，但我必须让它在 chrome 中工作......

【解决方案3】：

只需将脚本标签放在不带document.write 的头部即可。其次，我建议您将要执行的代码也放在 head 部分中的单独函数中，但是任何人，下面的示例也可以工作（另请参阅JS Bin）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr">
<head>
<script type="text/javascript" src="/_layouts/1033/init.debug.js?rev=Cn3X2qRiBI8U52EFeStGwg%3D%3D"></script>
</head>

  <body scroll="no" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined'){ _spBodyOnLoadWrapper();}" class="v4master">
</body>

【讨论】：

【解决方案4】：

我建议使用以下脚本：

window.onload = function() {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.onreadystatechange = function () {
        if(this.readyState == 'complete') {
            if (typeof(_spBodyOnLoadWrapper) != 'undefined') {
                        _spBodyOnLoadWrapper();
                    }
        }
    }
    script.src = '/_layouts/1033/init.debug.js?rev=Cn3X2qRiBI8U52EFeStGwg%3D%3D';
    head.appendChild(script);
}

document.write 的使用不是一个好主意。上面的代码动态地将一个新的脚本标签添加到当前页面的页眉中。它检测何时加载此脚本并执行您的函数。

【讨论】：

我没有投反对票，但是：Wjat 是 helper 应该是......如果直到在 window.onload 事件触发之后？
就是这样。您根本不需要使用 bodu.onload。 Window.onload 和后来的 .onreadystatechange 是你需要的东西。但是，据我所见，这里的其他人喜欢下面的答案。
如果你在body标签中使用带有onload的代码，你可能需要另一个js函数，因为稍后你可能想要添加另一个库。另外，我发现在 html 标签中包含脚本并不是最优雅的解决方案。
我从不使用 in-html-js，不要误会我的意思...我完全理解您的代码，但我不确定您是否这样做。感觉就像是盲目的复制粘贴，主要是因为您没有解释任何内容，并将这一行留在：script.onload = helper;，就您的代码而言，它不起作用（助手未定义）
:) 我忘了删除它。当然它是从某个地方复制粘贴的，但它是我在项目中经常使用的代码，我知道它的作用:)。我不同意我没有解释它的目的是什么。只需检查 sn-p 下方的文本。还不够吗？

【解决方案5】：

我遇到了这个问题并尝试了这里建议的解决方案，但没有奏效。更多搜索表明这是 Chrome 中的一个错误，似乎至少可以追溯到 2009 年：

http://productforums.google.com/forum/#!topic/chrome/7VIpByhmU3U

问题是 body.onload（以及 window.onload）在网页完全加载之前被触发，显然在我的情况下，因为我正在加载大图像，其时间-负载随净流量而变化。解决方法是将您的 JavaScript 放入页面任何引用的 HTML 之后，但在结束标记之前：

<script type="text/javascript">
     if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();
</script>

这对我来说也有效果，在没有出现错误的其他浏览器（Firefox、Safari）中生成页面内容的更即时更新。

【讨论】：

【解决方案6】：

检查您是否有 2 个 onload 事件。

【讨论】：