Currently, my approach (thanks to so user help) is to load a offsite html into the current page via:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#output").load("https://homepageforme.com/pathtofile/Search.html");
});
</script>
<div class="formClass">
<div id="output">
</div>
The only gripe I have here, is that this requires me to specifiy a full "url".
F.e. In iframes I could simply state "Search.html" (similar to a href), but here this won't work.
If there is no other workaround, I'd be ok with "taking the current window url" (window location) (sans the final file of the current page) => https://homepageforme.com/pathtofile/
then adding the fileanme "Search.html"
getting "https://homepageforme.com/pathtofile/Search.html"
that way and being able to feed it to the JS like this.
The reason being, that if I want to migrate the website, I'm forced to edit the paths manually.
So you want the URL without the last part (/*.html), then, it's :
window.location.href.match(/(.*)[\/\\]/)[1]
Then, it becomes:
var baseUrl = window.location.href.match(/(.*)[\/\\]/)[1];
$("#output").load(baseUrl + "/Search.html");
NOTE - If you just want to reuse the origin (
http://example.com), then usewindow.location.origin