Question

在iframe加载时，我将google analytics片段插入iframe文档HEAD。

然后该片段正在插入此脚本

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

在父文档HEAD中的

，我希望它插入到iframe文档HEAD ...

中

Google代码段在iframe文档中执行，为什么在父窗口文档中插入脚本tage ？

您可以使用此功能轻松复制并运行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代码段代码时函数检索作为参数父文档对象，您可以使用此示例检查此行为，您可以在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>

这是上述脚本的结果

enter image description here

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

2 个答案: