I am currently attempting to do the following when the user clicks on a link:
The click is caught and, instead of navigating to the URL, the URL is loaded into a jQuery object.
I take the
<article>
element in the jQuery object.I replace the
<article>
element in the current document with the element in the jQuery object.
This works fine, except that the scripts in the page that I load in the jQuery object are not executed. Those scripts must run for its content to be complete and to work.
Normally, I would just load the scripts using jQuery's getScript function after replacing the <article>
element, except this has some undesirable effects on everything in the page that is outside of the <article>
element, because those scripts are not meant to be executed twice.
I am working with an extremely limited framework, which is not really suited for web development, and I am stuck with it. It generates a huge minimized single module. I cannot simply compartment or edit the scripts to make them do exactly what I need them to do, and none of its functions seem to do exactly what I need it to do.
function loadArticle(targetURL)
{
var newPage = $("<div />");
newPage.load(targetURL, function (response, status, xhr) {
if (status != "error")
{
newPageScripts = $('<script src="path/to/framework/script.js"></script>');
newPageArticle = newPage.find("article");
$("article").replaceWith(newPageArticle);
$("article").append(newPageScripts);
window.history.pushState("","",targetURL);
}
});
}
I am wondering if I can, either:
Load the page in an object, force it to execute its own scripts on itself, then replace the
<article>
element in my document with its resulting<article>
element.Load the page in an object, replace the
<article>
element in my document with its<article>
element, then run its scripts, in a way that only affects the content of the<article>
element, as if it was restricted to its scope, or sandboxed.