通过 AJAX 加载的 HTML 内容无序加载外部 JavaScript

Question

Here's the scenario, not sure what I'm missing.

• Page A.htm makes an ajax request for page B.htm, and inserts the response into the page.

• Page B.htm contains links to several other JS files, many of which contain a document.ready() function to initialize them.

This works fine when A.htm and B.htm are on the same server but not when they are on different servers.

What I think I'm seeing here, is that when page A and B are on different servers (cross domain ajax), the external resources are being returned asynchronously, or at least out of order, so scripts are executing expecting JQuery.UI to be loaded already, when it is not.

Appreciate any pointers or advice. Apologies for the poor explanation.

Answer 1

You are injecting HTML + script tags via jQuery. In this case *:

• HTML content except scripts are injected in the document
• Then all scripts are executed one by one
• If a script is external then it is downloaded and executed asynchronously

Therefore an external or inline script that depends on jQuery UI might execute before jQuery UI.

One possible solution is to change the way your pages work:

• Get rid of external scripts in pageb.html but keep inline scripts
• Load the required scripts in pagea.html
• Load pageb.html

Another solution is to roll your own jQuery function that will:

• Strip all <script src> elements from HTML
• Download and execute those scripts in order
• Inject the remaining HTML

---

^{* The exact behavior is not documented. I had to look into the source code to infer the details.}

Answer 2

you are correct in your impression that the issue is a difference in how the requests are handled cross-domain.

Here is a link to get you on the right track : How to make synchronous JSONP crossdomain call

However, you will have to actually re-achitect your solution somewhat to check if the resource has been loaded before moving on. There are many solutions (see the link)

You can set a timer interval and check for something in the dom, or another reasonable solution (despite it's lack of efficiency) is to create a "proxy" serverside (eg php) file on your server and have that file do the cross-domain request, then spit out the result.

Note that since jquery UI is a rather large file, it's conceivable that the cross-domain request finishes first, and executes immediately, even though jqueryUI is not loaded yet. In any case, you're going to have to start thinking about having your app react rather than follow a sequence.