Skip to content

Instantly share code, notes, and snippets.

@m3g4p0p

m3g4p0p/inner.html

Created July 30, 2020 18:15
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save m3g4p0p/4317b90b4d90d67a6b7bdf440207ca3c to your computer and use it in GitHub Desktop.
Save m3g4p0p/4317b90b4d90d67a6b7bdf440207ca3c to your computer and use it in GitHub Desktop.
Download ZIP
Monitor events inside iframe
Raw
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>
Raw
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')
link.addEventListener('mouseover', displayEvent)
link.addEventListener('mouseout', displayEvent)
link.addEventListener('click', displayEvent)
})
Raw
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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment