How to use jquery from parent inside a child window

Question

If you look at the reference link, it has an iframe that accesses its parent reference for jquery. Is this same thing possible if, instead of an iframe, it was a child window?

P.S.
Despite the unknown reason for syntax error the click handler still works if I continue through the error?

syntax error
I'm getting a non-descriptive syntax error on return window.opener.$ when it's called by $('#Button1'). So, I'm not getting to my alert.

parent window

<html>
<body>

    <input id="Parent_Button1" type="button" value="Pop out window" />

    <script>
        window.onload = function () {
            $('#Parent_Button1').on('click', function () {
                window.open('pop-out-win.aspx', '', 'width=400,height=300');
            });
        }
    </script>
</body>
</html>

child window

<input id="Button1" type="button" value="push me" />

<script>
    window.onload = function () {
        if (typeof (jQuery) == "undefined") {
            var iframeBody = document.getElementsByTagName("body")[0];
            var jQuery = function (selector) { return window.opener.$(selector, iframeBody); };
            var $ = jQuery;

            var btn1 = $('#Button1');

            btn1.on('click', function () {
                alert('achievement unlocked!')
            });
        }
    }
</script>

reference
https://stackoverflow.com/a/10950158/139698

Yes, the procedure is possible. What exactly as you trying to accomplish? — guest271314, Jun 09 '17 at 19:35
oops, I failed to mention that I'm getting a non-descriptive syntax error on `return window.opener.$` when it's called by `$('#Button1')`. So, I'm not getting to my alert. — Rod, Jun 09 '17 at 19:39
See [How to clear the contents of an iFrame from another iFrame](https://stackoverflow.com/questions/33645685/how-to-clear-the-contents-of-an-iframe-from-another-iframe/), [How can I load a shared web worker with a user-script?](https://stackoverflow.com/questions/38810002/how-can-i-load-a-shared-web-worker-with-a-user-script/) — guest271314, Jun 09 '17 at 19:41

score 0 · Accepted Answer · answered Jun 09 '17 at 22:28

I did not solve browser compatibility, readabilty, etc but what about like this:

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    function myFunction() {
      var childWindow = window.open("", "childWindow", "width=200,height=100");
      var script = childWindow.document.createElement("script");
      script.innerHTML = 'if (typeof(jQuery) == "undefined") { window.jQuery = function(selector) { return window.opener.jQuery(selector, document);};jQuery = window.opener.$.extend(jQuery,window.opener.$);window.$ = jQuery;var msg = "Created with jQuery!";$("body").append(\'<button onclick="alert(msg)">Text</button>\');}';
      childWindow.document.getElementsByTagName("head")[0].appendChild(script);
    }

  </script>
  <p>Click to test child window jQuery injection.</p>

  <button onclick="myFunction()">Try it</button>
</body>

This is content of script tag above in readable form:

if (typeof(jQuery) == "undefined") {
    window.jQuery = function(selector) {
        return window.opener.jQuery(selector, document);
    };
    jQuery = window.opener.$.extend(jQuery, window.opener.$);
    window.$ = jQuery;
    var msg = "Created with jQuery!";
    $("body").append('<button onclick="alert(msg)">Text</button>');
}

Working Fiddle example

How to use jquery from parent inside a child window

1 Answers1