iframe fixes

This commit is contained in:
Neale Pickett 2018-09-21 20:42:38 +00:00
parent 3a8fbc503b
commit 54efa779af
1 changed files with 14 additions and 7 deletions

View File

@ -7,10 +7,16 @@
<link rel="icon" href="res/icon.svg" type="image/svg+xml"> <link rel="icon" href="res/icon.svg" type="image/svg+xml">
<link rel="icon" href="res/icon.png" type="image/png"> <link rel="icon" href="res/icon.png" type="image/png">
<script> <script>
function render(obj) { function resize() {
let body = document.getElementById("body"); let frame = document.getElementById("body");
body.innerHTML = obj.body; frame.height = frame.contentDocument.documentElement.scrollHeight;
console.log("XXX: Munge relative URLs (src= and href=) in body") }
function render(obj, base) {
let frame = document.getElementById("body");
let html = "<base href='" + base + "'><link rel='stylesheet' href='../../../basic.css'>" + obj.body;
frame.addEventListener("load", resize);
frame.srcdoc = html;
} }
function init() { function init() {
let params = new URLSearchParams(window.location.search); let params = new URLSearchParams(window.location.search);
@ -18,13 +24,14 @@ function init() {
let points = params.get("points"); let points = params.get("points");
let puzzleId = params.get("pid"); let puzzleId = params.get("pid");
let fn = "content/" + categoryName + "/" + puzzleId + "/puzzle.json"; let base = "content/" + categoryName + "/" + puzzleId + "/";
let fn = base + "puzzle.json";
fetch(fn) fetch(fn)
.then(function(resp) { .then(function(resp) {
return resp.json(); return resp.json();
}).then(function(obj) { }).then(function(obj) {
render(obj); render(obj, base);
}).catch(function(err) { }).catch(function(err) {
console.log("Error", err); console.log("Error", err);
}); });
@ -39,7 +46,7 @@ document.addEventListener("DOMContentLoaded", init);
<body> <body>
<h1>Puzzle</h1> <h1>Puzzle</h1>
<section> <section>
<div id="body">Loading...</div> <iframe seamless id="body">Loading...</iframe>
</section> </section>
<form action="answer" method="post"> <form action="answer" method="post">
<input type="hidden" name="cat"> <input type="hidden" name="cat">