How can I read the loaded scripts in an Iframe?

Question

How can I read the loaded scripts in an Iframe?

I want to echo the variables outside the iframe and use the variables in script.js out of the iframe.

My code:

<script type="text/javascript">
  var myIFrame = document.getElementById(ifr_id);
  var script = myIFrame.contentWindow.document./*script.js*/;
</script>

In the Iframe's <head>: <script type="text/javascript" src="script.js"></script>.

script.js:

$rootScope.texts = {

  content : 'inceptos suspendisse etiam tempor posuere volutpat tempor dapibus varius nullam sagittis nibh amet in mattis quisque, conubia tempor at eros turpis erat, phasellus tincidunt tristique nisl.', 

  copyright       :   '--- © 2014 RobbieWilliams Interactive. All rights reserved.',
};

how can i load <script>'s into an iframe? (but I want the opposite)

Nothing, I want to read the js file that is loaded in the Iframe. — Dirk Jan, Oct 27 '14 at 13:23
Maybe you can write a function and call that function to check js is included or not. — Gurkan İlleez, Oct 27 '14 at 13:27
@WQuaniran Are you sure you have access to objects in iframe content? — Reporter, Oct 27 '14 at 13:30
Yes but I don't know how to read them. In script.js there are some variables. I want to read them. — Dirk Jan, Oct 27 '14 at 13:31
Jquery has got a script loader, is that what you are looking for ? http://api.jquery.com/jquery.getscript/ — somethinghere, Oct 27 '14 at 13:31
This sounds like an X-Y problem. What is the actual objective you are trying to solve. Provide code — charlietfl, Oct 27 '14 at 13:37

score 1 · Answer 1 · answered Oct 27 '14 at 13:32

1

Read them out like this

var scripts = myIFrame.contentWindow.document.getElementsByTagName("script");
for (var i=0;i<scripts.length;i++) {
   if (scripts[i].src) {
       console.log(i,scripts[i].src);
   } else {
       console.log(i,scripts[i].innerHTML);
   }
}

That should work.

Or you could try using myIFrame.contentWindow.document.scripts. See https://developer.mozilla.org/en-US/docs/Web/API/document.scripts

answered Oct 27 '14 at 13:32

Willem Mulder

12,974
3
37
62

Can I also use something like `scripts[i].data`? – Dirk Jan Oct 27 '14 at 14:00
.data does not return anything. What data do you need? When you have the src or innerHTML of the script tag, you can gain access to its content... – Willem Mulder Oct 27 '14 at 14:03

score 0 · Answer 2 · answered Oct 27 '14 at 13:33

This depends where the iFrame is originating from. If the IFrame source domain is the same as the one of the parent DOM then you can access the DOM of that Iframe. This would allow you to fetch the script elements with jquery. Howeveer I'm not sure of this. I never tried to get the javascript as html.

$('iframe > script').html();

Then you would be able to use console.log() to show this in the console or show it in the parent dom.

If the source domains are not the same you would need to use a plugin like the following: http://benalman.com/projects/jquery-postmessage-plugin/

This plugin allows iframes from different domains to communicate with each other. However, you would need to have access to the iframe source to include this javascript in the iframe.

score 0 · Answer 3 · edited May 23 '17 at 12:12

First, in order to access to the iframe elements, the origin page and the iframe must be in the same domain, or have CORS enable to allow resources sharing.

Assuming you can access the iframe content, you can get the iframe content:

var iframe = $('#frame_main').contents(),
    scripts = iframe.find('script'),
    target = scripts.find('[src$="script.js"]').first();

Now that we have the script, we are going to insert and execute the script in the page asynchronously, and we react when the script is loaded using the callback for onload event.

var js = document.createElement('script');
js.type = 'text/javascript';
js.src = target.attr("src");
js.onload = function() {
    // do something when the script has been executed
};

As we know, HTML is rendered linearly (unless the caller function is an async callback), meaning that the script in current execution is the last one, so we are going to insert the new script after the current script.

var currentScript = $("script").last();
currentScript.after(js);

Now the script element has been added to the document, and it will be executed asynchronously and we can react when the script is executed thanks to the onload callback.

How can I read the loaded scripts in an Iframe?

3 Answers3