2

I am currently attempting to do the following when the user clicks on a link:

  1. The click is caught and, instead of navigating to the URL, the URL is loaded into a jQuery object.

  2. I take the <article> element in the jQuery object.

  3. 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:

  1. 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.

  2. 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.

Quote
  • 183
  • 10
  • Did you considered iframe element? In that case make sure that you are creating [script in iframe's document](https://stackoverflow.com/questions/1591135/why-does-appending-a-script-to-a-dynamically-created-iframe-seem-to-run-the). – bigless May 10 '19 at 02:49
  • @bigless So something like that, then? https://jsfiddle.net/bluewoods/pq9cw7dx/ – Quote May 10 '19 at 03:18
  • @bigless For the record, I tried using a similar approach on my website, and unfortunately, it creates significant performance problems. Also, I can't unload the frame after taking its `
    ` out of the frame and into the main document without unloading its javascript at the same time, and then the article stops working. What I can do however is replace `
    ` with an iframe that loads the page, then remove everything but the article inside the iframe. That's the most amateurish, hacky approach I can think of, but it's the only one that seems to work in this context...
    – Quote May 17 '19 at 18:38

0 Answers0