Can I run .js on iFrames?

vmars316 · July 30, 2020, 4:00pm

Hello & Thanks ;
Can I run .js with iFrames ?
See Example .
From main html , I would like to trigger a js function on a hover over link ,
and on a click-on-link
happening in the iFrame .
Is this sort of thing do-able ?
Thanks

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="http://www.vmars.us" target="iframe_a">http://www.vmars.us</a></p>

<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>

</body>
</html>

Iframe - Target for a Link

http://www.vmars.us

When the target attribute of a link matches the name of an iframe, the link will open in the iframe.

igor_g · July 30, 2020, 4:27pm

As I know, you can reach HTML-element in iFrame and init there an event. Direct access to .js function in iFrame, I think, impossible.

m3g4p0p · July 30, 2020, 6:16pm

Hi @vmars316, if the iframe is on the same domain as the host page, you can access it’s window and document via its contentWindow and contentDocument properties, respectively:

gist.github.com

https://gist.github.com/m3g4p0p/4317b90b4d90d67a6b7bdf440207ca3c

inner.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Inner</title>
</head>
<body>
  <a href="#" id="my-link">Click me</a>
</body>
</html>

main.js

const message = document.getElementById('message')
const iframe = document.getElementById('my-iframe')

function displayEvent (event) {
  message.textContent = event.type
}

iframe.contentWindow.addEventListener('load', () => {
  const link = iframe.contentDocument.getElementById('my-link')

This file has been truncated. show original

outer.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Outer</title>
</head>
<body>
  <p id="message">&nbsp;</p>
  <iframe src="inner.html" id="my-iframe"></iframe>
  <script src="main.js"></script>

This file has been truncated. show original

vmars316 · July 31, 2020, 1:58am

same domain as the host

Yes that’s a problem .
I am thinking
a better approach might be to <embed> an html page .
Any thoughts ?
Thanks

system · October 30, 2020, 8:58am

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