jQuery using Script Tags

Question

How come when the dom is loaded the script tag is there but it is not executing? let's say I have this code

History.Adapter.bind(window, 'statechange', function(e) { // Note: We are using statechange instead of popstate
        var State = History.getState();
        $('#main-content').load(State.url + " #main-content");
    });

And I will load the contents of " #main-content" from the given url. the given url and that url contains this

<div id = "main-content">
<script>
$(document).ready(function(){
  console.log($('audio'));
})
</script>
</div>

Why is it it is not showing audio in the console?

Community · Accepted Answer · 2020-06-20 09:12:55Z

As noted on http://api.jquery.com/load/ there are a couple of reasons why scripts loaded this way may not be executed.

In this case you are using a suffixed selector expression to insert only part of the fetched content into the current document. The downside of this is that scripts will be stripped from the content before any part of it will actually be inserted into the document.

The reason for excluding scripts is mentioned in the jQuery load method's source (v1.9.1)

// If a selector was specified, locate the right elements in a dummy div

// Exclude scripts to avoid IE 'Permission Denied' errors

If possible, I would work around this by making the server respond with just the "main-content" div - perhaps triggered by a query string you append to the initial URL - and load it without the selector.

Returning only part of a document depending on some condition is entirely up to the server-side application generating the document, if any. If you - for example - are using PHP, change your script to call load(State.url + "?section=main-content"), then let PHP check if $_GET['section'] equals 'main-content'. In that case skip rendering everything except the div you want to update. I cannot give a much more detailed answer on that part of the issue since how depends on what you are running on the server.

If you are serving static files and the host doesn't run PHP or another language, I've heard others recommending loading the entire document into an iFrame first (without the #main-content part in the load() call) and then extracting the pieces you wish to update in the main document using pure JavaScript. It might work for your situation, but your scripts would most likely be executed twice. First all scripts part of the loaded document get executed in the context of the iFrame, then the scripts part of the extracted section will then get executed again upon being inserted into the main document.

If you are serving static files, but the host does run PHP or another language, it might be possible to write a smallish script for extracting only the section(s) of the document(s) you need. Such a script could be based on PHP DOM and returning only part of document, but modified to take the path to the XHTML file from the GET/query parameters instead. That would require changing your load call to something like load("path/to/extraction_script.php?filename=" + escape(State.url) + "&section=main-content") so the entire path to the previously visited page gets sent to the server.

NOTE: Doing it that way could open up major security holes since you are essentially creating a proxy server able to read any file on the server it has access to, including external URLs, unless you are very careful. I do not recommend this approach and I am not able to test if it would actually work in practice. It depends both on your server configuration and what your documents look like.

@user962206 That is a bit too specific for me to answer accurately, but I've updated the answer with some general information on the subject.

Collectives™ on Stack Overflow

jQuery using Script Tags

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related