0

I am experimenting with making a website where I have two iframes with other webpages side by side, and would only like to show a certain part of these websites.

Trying to edit the innerHTML of these websites throws errors regarding cross-page security problems. How can I run Javascript inside these iFrames in a safe manner? If this is not possible, is there a good atlernative for iFrames where I can have to websites side-by-side?

It's not important for me to be able to edit both iFrames, only one of them need to be editable.

Pinn the Angled one
  • 51
  • 1
  • 1
  • 4

1 Answers1

0

An iframe is just a 'hole' in your page that displays another web page inside of it. The contents of the iframe are not in any shape or form part of your parent page.

If your iframe is loaded from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.

Considering the iframe is from the same domain, Try using the below code and see if it works. The below code will add CSS changes to the iframe. If this works for you, then you can run javascript as well.

<script>
 var iframe = document.getElementById("frame1");
$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .lt{display:none;}  </style>"));
});
</script>

If you are getting "permission denied type errors.", I think what you are doing is subject to the same-origin policy. This should be the reason why you are getting permission denied type errors.

Here you can check the possible solutions.

Unable to access iframe content (same-origin policy)

Rajeev
  • 1,376
  • 2
  • 15
  • 33