I got a html file like this,
//some content
//some content
index.html or whatever
<iframe src="filename.html"></iframe>
filename.html
<!DOCTYPE html>
<html lang="en">
<head>
//some content
</head>
<body>
//some content
</body>
</html>
You can use <link>
element with rel
attribute set to import
, href
set to path to file, type
set to "text/html"
. Use XMLSerializer()
instance .serializeToString()
with replacement document
.doctype
property as parameter to get <!DOCTYPE>
declaration from imported document
; document.write()
with .import.documentElement.outerHTML
property of link
element as parameter to replace existing .doctype
and <html>
node with .doctype
and <html>
of imported document
.
<!DOCTYPE html>
<html lang="en">
<head>
<link id="doc" rel="import" href="https://gist.githubusercontent.com/guest271314/9921cb52b143437b23f23fa32284ca35/raw/86532c043b666bce15b33c91dc29e98615dd4e25/replacementDocument.html" type="text/html" />
</head>
<body>
//original content
<button>load html document</button>
<script>
var link = document.getElementById("doc");
document.querySelector("button")
.onclick = function() {
// http://stackoverflow.com/a/30565562/
var dt = new XMLSerializer().serializeToString(link.import.doctype);
document.write(dt, link.import.documentElement.outerHTML);
document.close();
}
</script>
</body>
</html>