0

I have a question about changing output of iframe. My site loads a front page (wordpress) where the entire content block is an iframe. Can I manipulate the output of the iframe from the wordpress side?

Say I want to scroll to an id tag in the content of the iframe, can I create a link on the frontpage outside the iframe that goes there?

Another example could be to pre-fill an input field in the iframe by clicking a menu link in wordpress, is it at all possible?

prokops
  • 45
  • 5

1 Answers1

0

It can depend on whether the iframe is cross-origin or not (i.e. whether the src attribute on the iframe is on the same domain as your wordpress site).

If it isn't - then you can simply access the iframe contents using javascript from the parent window, e.g. (in the parent window):

const iframe = document.getElementById('<your-iframe-id>');
const iframeDoc = iframe.documentElement || iframe.contentWindow.document;
doThingsWithIframeContents(iframeDoc);

If it is cross-origin - then you will need to pass messages to a script you control inside the iframe document. That script will then manipulate the contents of the iframe itself. Without going into too much detail, take a look at https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage.

Edit: Actually, take a look at this other SO post that is relevant to this case: How to communicate between iframe and the parent site?

Hope that helps!

fractaltheory
  • 36
  • 4