Iframe prevents me from effecting the host webpage

JavaScript
1

Due to architectural limitations in MediaWiki I have to embed a custom contact form in it in iframe.

I have the problem that JavaScript commands in the submit event handler of the form effect only the HTML embedded in the iframe, but not html of the webpage which contains the iframe.

For example, if I want that after the form submission event the remove() method will be used on a div situated just before the iframe than I can’t, the remove() method just won’t effect this div because it’s outside the iframe.

How would you suggest to solve the div removal problem?

2

If they’re on the same host, with the same protocol and the same port, parent is a reference to the outer document’s window. If not, it gets a bit more difficult, and will require coding on both sources.

1 Like
3

Hello !

They are indeed on the same hosting environment, with the same protocol, same port, etc.

I should read about iframe parent.

4

Indeed, I double checked this pattern and found it to work:

parent.document.querySelector("#ID").remove();

The element just before the iframe, was indeed removed on submitting the contact form in the iframe.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.