如果脚本动态插入到iframe头中，则文档错误

Question

在iframe加载时，我将Google Analytics（分析）摘要插入到iframe文档HEAD中。

然后代码段正在插入此脚本

<script async="" src="//www.google-analytics.com/analytics.js"></script>

在父文档HEAD中，我希望将其插入iframe文档HEAD ...

Google片段是在iframe文档中执行的，为什么要在父窗口文档中插入脚本年龄？

您可以使用此代码轻松复制并运行index.html

no_analytics.html包含：

<!DOCTYPE html>
<html>
    <head>
        <style>body{color: #AAA;}</style>
    </head>
    <body>no analytics</body>
</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){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>

请注意，如果iframe已包含Google Analytics（分析）摘要，则不会发生这种情况。

Answer 1

我建议您尝试一下：

$(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));
});

Answer 2

这是因为，您的jquery代码正在将父文档对象作为上下文传递给google Analytics片段，因此，当调用google Analytics snippet代码时 ， 函数会作为参数parent document object进行检索 ，您可以使用以下示例检查此行为，您可以看到在Chrome开发工具中，文档指向您的Google脚本。

no_analytics.html

<!DOCTYPE html>
<html>
  <head>
    <style>body{color: #AAA;}</style>
    <script>
        console.log("document => ", document);
    </script>
  </head>
  <body>no analytics</body>
</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>

为了使您的示例正常工作，我使用了不带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>

这是上面脚本的结果

在此处输入图片说明

如果脚本动态插入到iframe头中，则文档错误

问题描述

2 个解决方案

解决方案1
0 2014-04-11 12:12:25

解决方案2
0 已采纳 2014-04-14 09:54:15

如果脚本动态插入到iframe头中，则文档错误

问题描述

2 个解决方案

解决方案1 0 2014-04-11 12:12:25

解决方案2 0 已采纳 2014-04-14 09:54:15

解决方案1
0 2014-04-11 12:12:25

解决方案2
0 已采纳 2014-04-14 09:54:15