如果脚本动态插入到iframe头中，则文档错误
[英]Wrong document if script dynamically inserted into iframe head
问题描述
On iframe load, I insert google analytics snippet into iframe document HEAD. 
在iframe加载时，我将Google Analytics（分析）摘要插入到iframe文档HEAD中。
Then the snippet is inserting this script 然后代码段正在插入此脚本
<script async="" src="//www.google-analytics.com/analytics.js"></script>
in the parent document HEAD, I expected it to be inserted in the iframe document HEAD... 在父文档HEAD中，我希望将其插入iframe文档HEAD ...
Google snippet is executed in the iframe document, so why is it inserting script tage in parent window document ?? Google片段是在iframe文档中执行的，为什么要在父窗口文档中插入脚本年龄？
You can easily reproduce using this and run index.html 您可以使用此代码轻松复制并运行index.html
no_analytics.html contains: no_analytics.html包含：
<!DOCTYPE html>
<html>
<head>
<style>body{color: #AAA;}</style>
</head>
<body>no analytics</body>
</html>
index.html contains: index.html包含：
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<iframe id="insert" src="no_analytics.html"></iframe>
<script>
document.getElementById('insert').onload= function() {
var c =
"(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){"+
"(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),"+
"m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)"+
"})(window,document,'script','//www.google-analytics.com/analytics.js','ga');";
$('#insert').contents().find('head').append($('<script>').html(c));
};
</script>
</body>
</html>
Please note that this is not happening if the iframe contains already the google analytics snippet. 请注意，如果iframe已包含Google Analytics（分析）摘要，则不会发生这种情况。
2 个解决方案
解决方案1
0 2014-04-11 12:12:25
I suggest you to try this: 我建议您尝试一下：
$(window).load(function () {
var c =
"(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){" +
"(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o)," +
"m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)" +
"})(window,document,'script','//www.google-analytics.com/analytics.js','ga');";
$('#insert').contents().find('head').append($('<script>').html(c));
});
解决方案2
0 已采纳 2014-04-14 09:54:15
This behaviour is because, your jquery code is passing parent document object as context to Your google analytics snippet, so when Your google analytics snippet code is invoked function retrieve as parameter parent document object , you can check this behaviour using this example, You can see in dev tools in chrome on which document is pointing Your google script. 这是因为，您的jquery代码正在将父文档对象作为上下文传递给google Analytics片段，因此，当调用google Analytics snippet代码时 ， 函数会作为参数parent document object进行检索 ，您可以使用以下示例检查此行为，您可以看到在Chrome开发工具中，文档指向您的Google脚本。
no_analytics.html no_analytics.html
<!DOCTYPE html>
<html>
<head>
<style>body{color: #AAA;}</style>
<script>
console.log("document => ", document);
</script>
</head>
<body>no analytics</body>
</html>
and index.html 和index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<iframe id="insert" src="no_analytics.html"></iframe>
<script>
document.getElementById('insert').onload= function() {
var c =
"(function(i,s,o,g,r,a,m){
console.log('document from google script => ', s);
i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){"+
"(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),"+
"m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)"+
"})(window,document,'script','//www.google-analytics.com/analytics.js','ga');";
$('#insert').contents().find('head').append($('<script>').html(c));
};
</script>
</body>
To make Your example work I use javascript code without jQuery. 为了使您的示例正常工作，我使用了不带jQuery的JavaScript代码。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<iframe id="insert" src="no_analytics.html"></iframe>
<script>
document.getElementById('insert').onload = function () {
var c =
"(function(i,s,o,g,r,a,m){ console.log('document from google script => ', s);i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){" +
"(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o)," +
"m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)" +
"})(window,document,'script','//www.google-analytics.com/analytics.js','ga');",
documentIframe = document.getElementById('insert').contentDocument;
var script = documentIframe.createElement('script');
script.innerHTML = c;
documentIframe.head.appendChild(script);
};
</script>
</body>
And here is the result of the above script 这是上面脚本的结果
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.