Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<meta charset="utf-8">
<title>Nested frame containing an SVG intersection target</title>
<style>
body {
margin: 0;
}
iframe {
display: block;
width: 400px;
height: 400px;
border: 0;
}
</style>
<script>
window.addEventListener("message", event => {
if (event.source !== parent)
return;
const {overflow, overflowClipMargin} = event.data;
const frame = document.createElement("iframe");
frame.onload = () => {
const child = frame.contentWindow;
const svg = child.document.querySelector("svg");
svg.style.overflow = overflow;
svg.style.overflowClipMargin = overflowClipMargin;
const observer = new child.IntersectionObserver(entries => {
const entry = entries[entries.length - 1];
if (!entry.isIntersecting)
return;
observer.disconnect();
parent.postMessage({
targetWidth: entry.boundingClientRect.width,
targetHeight: entry.boundingClientRect.height,
width: entry.intersectionRect.width,
height: entry.intersectionRect.height,
ratio: entry.intersectionRatio,
}, event.origin);
});
observer.observe(child.document.getElementById("target"));
};
frame.srcdoc = `<!DOCTYPE html>
<style>
body { margin: 0; }
svg {
display: block;
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
#target { width: 200px; height: 200px; background: green; }
</style>
<svg>
<foreignObject width="200" height="200">
<div id="target"></div>
</foreignObject>
</svg>`;
document.body.append(frame);
}, {once: true});
</script>