2021-06-06 13:57:18 +12:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
margin: 0px;
|
|
|
|
|
background-color: #383c4a;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
const queryString = window.location.search;
|
|
|
|
|
const queryLoc = window.location.origin;
|
|
|
|
|
const queryRequest = window.location.href.split('?')[0];
|
2021-06-08 22:01:11 +12:00
|
|
|
const windowLoc = window.location.toString();
|
2021-06-06 13:57:18 +12:00
|
|
|
console.log(queryString);
|
|
|
|
|
const urlParams = new URLSearchParams(queryString);
|
|
|
|
|
const requestURL = urlParams.get('url')
|
|
|
|
|
const selector = urlParams.get('selector')
|
|
|
|
|
// Fetch the content
|
|
|
|
|
fetch(queryLoc + requestURL)
|
|
|
|
|
.then(function (data) {
|
|
|
|
|
return data.text();
|
|
|
|
|
})
|
|
|
|
|
.then(function (html) {
|
|
|
|
|
// Parse the DOM of the fetched file
|
|
|
|
|
var parser = new DOMParser();
|
|
|
|
|
var doc = parser.parseFromString(html, "text/html");
|
|
|
|
|
// Select the correct container
|
|
|
|
|
var htmlTrimmed = doc.querySelector(selector);
|
|
|
|
|
if (htmlTrimmed) {
|
2021-06-08 22:05:12 +12:00
|
|
|
htmlTrimmed = htmlTrimmed.parentElement;
|
2021-06-06 13:57:18 +12:00
|
|
|
var styleSheets = doc.querySelectorAll("link");
|
|
|
|
|
for (var i = 0; i < styleSheets.length; i++) {
|
|
|
|
|
document.head.appendChild(styleSheets[i]);
|
|
|
|
|
}
|
|
|
|
|
// Fetch and refactor links, to use this html doc where appropriate
|
|
|
|
|
var hlinks = htmlTrimmed.querySelectorAll("a");
|
|
|
|
|
for (var i = 0; i < hlinks.length; i++) {
|
|
|
|
|
if (hlinks[i].href.replace(queryLoc, "").startsWith("/")) {
|
|
|
|
|
// Replace either http://<somehost>/<somedoc> or http://<somehost> with "" so that:
|
|
|
|
|
// 1.) links to elements on the same page work
|
|
|
|
|
// 2.) disable cross-origin requests
|
2021-06-08 22:01:11 +12:00
|
|
|
var fixedURL = hlinks[i].href.replace(windowLoc.split('#')[0], "").replace(queryLoc, "")
|
2021-06-06 13:57:18 +12:00
|
|
|
// If the remaining character is the hash, this is a same-page section link
|
|
|
|
|
if (fixedURL.startsWith("#")) {
|
|
|
|
|
fixedURL = requestURL + fixedURL;
|
|
|
|
|
}
|
|
|
|
|
// selector is the selector used to select the element. Use body if the whole page is required
|
|
|
|
|
hlinks[i].href = queryRequest + "?selector=" + selector + "&url=" + fixedURL;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// Paste the fetched html into this doc; set styles of the root element
|
|
|
|
|
document.getElementById('renderspot').innerHTML = htmlTrimmed.innerHTML;
|
|
|
|
|
document.getElementById("renderspot").classList = htmlTrimmed.classList;
|
|
|
|
|
// Find and run scripts
|
|
|
|
|
var scripts = document.getElementById("renderspot").querySelectorAll("script");
|
|
|
|
|
for (var i = 0; i < scripts.length; i++) {
|
|
|
|
|
if (scripts[i].innerText) {
|
|
|
|
|
eval(scripts[i].innerText);
|
|
|
|
|
} else {
|
|
|
|
|
fetch(scripts[i].src).then(function (data) {
|
|
|
|
|
data.text().then(function (r) {
|
|
|
|
|
eval(r);
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// To not repeat the element
|
|
|
|
|
scripts[i].parentNode.removeChild(scripts[i]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else{
|
|
|
|
|
// In case of an error url, just use the standard 404 page
|
|
|
|
|
fetch(queryLoc + "/404")
|
|
|
|
|
.then(function (data) {
|
|
|
|
|
return data.text();
|
|
|
|
|
})
|
|
|
|
|
.then(function (html) {
|
2021-06-08 21:54:36 +12:00
|
|
|
document.getElementById('capsule').innerHTML = html;
|
2021-06-06 13:57:18 +12:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2021-06-08 21:54:36 +12:00
|
|
|
<style>
|
|
|
|
|
#capsule {
|
|
|
|
|
padding-right: 15px;
|
|
|
|
|
padding-top: 20px;
|
2021-06-06 13:57:18 +12:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body margin="0">
|
2021-06-08 21:54:36 +12:00
|
|
|
<div id="capsule" class="ui container">
|
|
|
|
|
<!-- style="height: 100%; width: 100%" -->
|
|
|
|
|
<div id="renderspot" />
|
|
|
|
|
</div>
|
|
|
|
|
|
2021-06-06 13:57:18 +12:00
|
|
|
</body>
|
|
|
|
|
</html>
|
