65 lines
2.0 KiB
HTML
65 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Local Site — Iframe</title>
|
|
<link rel="stylesheet" href="assets/site.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Iframe Page</h1>
|
|
<nav><a href="index.html">Home</a></nav>
|
|
</header>
|
|
<main>
|
|
<h2>Sibling page in an iframe</h2>
|
|
<iframe src="about.html" width="100%" height="200" id="f1"></iframe>
|
|
<p>iframe status: <span id="f1-status">loading…</span></p>
|
|
|
|
<h2>Subdirectory page in an iframe</h2>
|
|
<iframe src="subdir/page.html" width="100%" height="200" id="f2"></iframe>
|
|
<p>iframe status: <span id="f2-status">loading…</span></p>
|
|
|
|
<h2>Cross-iframe script access (same-origin for file://?)</h2>
|
|
<button id="read-btn">Read iframe document title</button>
|
|
<p>Result: <span id="read-result">not attempted</span></p>
|
|
|
|
<h2>srcdoc iframe</h2>
|
|
<iframe srcdoc="<h1>Hello from srcdoc</h1><p><a href='index.html'>home</a></p>"
|
|
width="100%" height="120"></iframe>
|
|
|
|
<h2>data: URI iframe</h2>
|
|
<iframe src="data:text/html,<h1>Hello from data URI</h1>"
|
|
width="100%" height="120"></iframe>
|
|
</main>
|
|
<script>
|
|
(function () {
|
|
var f1 = document.getElementById('f1');
|
|
var f2 = document.getElementById('f2');
|
|
f1.addEventListener('load', function () {
|
|
document.getElementById('f1-status').textContent = 'loaded';
|
|
});
|
|
f1.addEventListener('error', function () {
|
|
document.getElementById('f1-status').textContent = 'ERROR';
|
|
});
|
|
f2.addEventListener('load', function () {
|
|
document.getElementById('f2-status').textContent = 'loaded';
|
|
});
|
|
f2.addEventListener('error', function () {
|
|
document.getElementById('f2-status').textContent = 'ERROR';
|
|
});
|
|
|
|
document.getElementById('read-btn').addEventListener('click', function () {
|
|
try {
|
|
var t = f1.contentDocument.title;
|
|
document.getElementById('read-result').textContent =
|
|
'OK title="' + t + '"';
|
|
} catch (e) {
|
|
document.getElementById('read-result').textContent =
|
|
'ERROR: ' + e.message;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|