문제

On iframe load, I insert google analytics snippet into iframe document 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...


Google snippet is executed in the iframe document, so why is it inserting script tage in parent window document ??

You can easily reproduce using this and run index.html

no_analytics.html contains:

<!DOCTYPE html>
<html>
    <head>
        <style>body{color: #AAA;}</style>
    </head>
    <body>no analytics</body>
</html>

index.html contains:

<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.

도움이 되었습니까?

해결책

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.

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

<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.

<!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

enter image description here

다른 팁

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));
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top