如何在网页中显示外部HTML页面-使用JavaScript

Question

I need to display an existing html page in another page. The object> tag displays it inside an iframe - which I don't want.

I read here: https://stackoverflow.com/questions/17148357/including-external-html-file-to-another-html-file

That it can be done with this piece of javascript:

<script type="text/javascript">
$(document).ready(function(e) {
    $('#header').load('name.html',function(){alert('loaded')});
});
</script>

Before this I've inserted:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But I'm getting the error: DOMException: failed to execute 'querySelectorAll' on element

What have I missed?

PS. I tried the document.write+="html+javascript-goes-here" method, but the external page-content is large so the document.write is long, cumbersome, and thus difficult to later understand/maintain.

Answer 1

Thanks stackOverflow - Got it running, once I'd spotted the "$ is not defined" error msg. Surrounded my function with:

(function($){
.... function here ...
})(jQuery);

and:

<div id="header"></div>

in the body.