How to change content of website loaded in iframe?

StackOverflow https://stackoverflow.com/questions/18516855

Question

I need to change content of website using jQuery loaded in iframe from other domain such this:

<html>
  <head>
  </head>
  <body>
    <iframe src="site.com/somepage.html></iframe>
    <script>
      $('iframe').find('div#message').value('hello');
    </script>
  </body>
</html>

Also I added target link to whitelist. Could any helps? Thanks.

Was it helpful?

Solution

If you want to get a website of different domain you have to use parser in your server side which will parse the html from the website and then echo the parsed html to your client side

OTHER TIPS

Due to cross-site attack/mocking securities, for a long time this is no more possible in the mainframe browsers (Chrome, IE, Fire) with domains diferent of your own.

You could achieve that thru proxying, by proxying I mean, using a server side solution where you get the HTML generated by "site.com" and outputs it as was in your domain.

Your script is running during runtime so it will not find the DOM of the iframe and will break. What you can do is create a function on your parent page like:

//On Your Parent page
function modifyIframeContent() {
     $('iframe').find('div#message').value('hello');
}

Then call this function from the iframe after it loads. 

// On Your Iframe page
window.onload = function() {
    parent.modifyIframeContent();
}

Of course: Your iframe must be of same domain for this work.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top