How can I get injected javascript code executed in local scope in iframe?

Question

I have a html document loaded in an iframe.
I have developed some popup-menu code in javascript for that document and I inject the code into the iframe from the main document.

But my code does not work in the iframe because it uses the "document" object and that surprisingly refers to the main document and not the iframe document.

I also play around content selection and there I need window.getSelection() which goes back to the main document's selections and I'd need window.frames[0].getSelection() instead.

Am I doing sth wrong?
Is there any simple solution to overcome this?

UPDATE:(clarification)
As Bergi pointed out, my question is about how to run correctly injected javascript code to get local scope and not global scope in the iframe?
So I do not have to rewrite document's and window's in the code...

UPDATE: (skeleton of my html)

<html>
  <head></head> <!-- script launches on jquery's $(document).ready -->
  <body>
    <iframe>
    [
      <body>
        ...
        <script></script> <!-- code injected here from the code (appended to the body) -->
      </body>
    ]
    </iframe>
  </body>
</html>

The script goes like this (using jquery):

$(function(){
$('iframe').load(function(){

var $doc = $('iframe').contents();
var $head = $('head', $doc);
$head.append('<link rel="stylesheet" href="/stylesheets/book-popup-menu.css" />');

var $body = $('body', $doc);
$body.append(' \
    <div id="popup"> \
    </div> \
');
$body.append(' \
    <script type="text/javascript"> \
              console.log(document.body);// it still displays the global body \
            </script> \
');
});
});

UPDATE: A fiddle demonstrating the issue

Depends on how you inject the code into the iframe - show us that snippet, please. If you're doing it wrong, the code is still executed in the global scope of the parent document. — Bergi
– Bergi, Commented May 7, 2013 at 14:40
And you say that the /scripts/book-popup-menu.js is executed with document pointing to the parent frame's one? — Bergi
– Bergi, Commented May 7, 2013 at 15:26
I have no idea what's going on yet, but I can confirm the problem. — Bergi
– Bergi, Commented May 7, 2013 at 16:46

Community · Accepted Answer · 2017-05-23 11:56:49Z

2

Finally, I've found an answer!

If you append code with jQuery like $body.append('<script>') then the '' element gets created by document.createElement('script') thus will be part of the global document. Even after it is inserted to the iframe document, it will execute in the global namespace.

So the solution is -- taking advantage of this fabulous solution:(Injecting Javascript to Iframe) -- to fall back to vanilla javascript:

$('iframe').load(function(){

    var $doc = $('iframe').contents();
    var $head = $('head', $doc);
    $head.append('<link rel="stylesheet" href="/stylesheets/book-popup-menu.css" />');

    var $body = $('body', $doc);
    $body.append('<div id="popup"></div>');// non-javascript content works fine

    var doc = $('iframe').contents()[0]; // doc = $doc[0] does not work for some reason... 

    var script = doc.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.textContent = "console.log(document.body)"; // this will be iframe's body
    $body[0].appendChild(script1); // $body.append(...) does not work
});

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered May 7, 2013 at 16:52

Barney Szabolcs

12.6k16 gold badges71 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bergi Over a year ago

I think you could as well use something like $("#popup", $doc).html("<script>…"), that should not create an element in jQuery's context.

Collectives™ on Stack Overflow

How can I get injected javascript code executed in local scope in iframe?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related