Modify HTML DOM based on iframe using javascript

Question

index.html

<html>
<head>
<title>Index</title>
</head>
<body>
<p>some text</p>
<a href="https://..." target="f">link</a>
<iframe name="f"></iframe>
</body>
</html>

Is it possible to hide the text inside p-tag once the target website is fully loaded inside the iframe?

Possible duplicate of [iFrame onload JavaScript event](https://stackoverflow.com/questions/29233928/iframe-onload-javascript-event) — Luis felipe De jesus Munoz, Jun 29 '18 at 20:24
I would suggest you consider using [jQuery](http://jquery.com/) too. It will help you greatly by removing the need to learn about all the low level JavaScript functions in the DOM. — Alexis Wilke, Jun 29 '18 at 20:35
@Akshay Post it in an answer. And why did you put the JS in the HTML box of codepen? — Barmar, Jun 29 '18 at 21:02

score 0 · Accepted Answer · answered Jul 06 '18 at 15:52

Try this link for solution.

Modified link as per @Barmar comments.

HTML

<p id="removeText"> some text</p>
<iframe src="demo_iframe.htm" name="iframe_a" id="iframe_a"></iframe>
<a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a>

JS

document.getElementById('iframe_a').onload = function() {
   document.getElementById('removeText').innerHTML = '';
}

Modify HTML DOM based on iframe using javascript

1 Answers1