Can i inject javascript into iframe?

Question

<html>
    <head>
        <link rel="stylesheet" href="my.css" />
    </head>
    <body>
        <iframe id="baidu-container" src="http://image.baidu.com/i?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1374487244324_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=giant" frameborder="0">
        </iframe>
        <script type="text/javascript" src="my.js"></script>
    </body>
</html>

I would like to execute the script in my.js after this iframe has loaded completely. So what shoud i do? Thanks.

If you need the control to happen from the parent window, you can have an event listener for the load event on the iframe element which then accesses the content of the iframe. Do you use jQuery at all? — Derek
– Derek, Commented Jul 22, 2013 at 2:19

user2587420 · Accepted Answer · 2013-07-22 02:32:07Z

1

<html>
    <head>
        <link rel="stylesheet" href="my.css" />
    </head>
    <body>
        <iframe id="baidu-container" src="http://image.baidu.com/i?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1374487244324_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=giant" frameborder="0">
        </iframe>
        <script>
          window.document.getElementById("baidu-container").onload = function() {
            var s = document.createElement("script");
            s.type = "text/javascript";
            s.src = "my.js";
            window.document.head.append(s);
          }
        </script>
    </body>
</html>

Listen to the iframe load event.
When the iframe document is loaded then add/execute your JavaScript code.

answered Jul 22, 2013 at 2:32

user2587420

603 bronze badges

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

Comments

sabof · Accepted Answer · 2013-07-22 02:51:36Z

1

Answering the question in the title. If the page inside the iframe is from another domain, you can't. Otherwise:

function addScript() {
  var iframeDoc = iframe.contentDocument;
  var s = iframeDoc.createElement('script');
  s.type = 'text/javascript';
  s.src = 'my.js';
  iframeDoc.body.appendChild(s);
}

// I'm creating the iframe programmatically, to make sure the onload handler fires.
var iframe = document.createElement('iframe');
iframe.width = 300;
iframe.height = 100;
iframe.onload = addScript;
iframe.src = "iframe-test2.html";
document.body.appendChild(iframe);

edited Jul 22, 2013 at 2:51

answered Jul 22, 2013 at 2:40

sabof

8,2024 gold badges32 silver badges53 bronze badges

Comments

Besworks · Accepted Answer · 2022-06-07 01:09:57Z

1

You can use the onload event on the iframe:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

edited Jun 7, 2022 at 1:09

Besworks

4,5931 gold badge24 silver badges41 bronze badges

answered Jul 22, 2013 at 2:13

carl-lopez

5525 silver badges12 bronze badges

2 Comments

robsch Over a year ago

link does not exist anymore

wviana Over a year ago

@robsch According to date this answer was post, probably was referring to this snapshot of w3schools. Suggested an edit in answer for this link.

Collectives™ on Stack Overflow

Can i inject javascript into iframe?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related