Question

The function below is intended to grab/process the HTML of either a jQuery selector or a URL. If a URL is passed in, it generates an iframe and, after the iframe is loaded, grabs the iframe’s HTML. (Note: I’m not using external URLs, just other pages on the same site.)

The function is throwing TypeError: 'undefined' is not an object (evaluating 'myHTML.find') whenever I pass in a URL. I don’t understand why. Does anything stand out here?

1   mynamespace.html: function ( source ) {
2   // Grabs and processes the HTML of a jQuery selector or URL.
3      
4      var myHTML;
5
6         if ( $(source).is('iframe') ) {
7            // if it's an iframe, use .contents() 
8            myHTML = $(source).contents().find('html').clone();
9
10        } else if (source.indexOf('http://') === 0 ) {
11           // if it's a URL, load an iframe
12           $(document.body).append('<iframe id="printiframe" src="'+source+'"></iframe>');   
13           $('#printiframe').load(function() {
14               // once loaded, send it back into this function,
15               // where it can then be processed as an iframe
16               return mynamespace.html ('#printiframe');
17           });
18
19        } else {
20           myHTML = $(source).clone();
21        }   
22      
23        // Do stuff to the HTML here, such as myHTML.find('bla')...
24
25        return myHTML.html();
26   }

Answer 1

I hope you don’t mind, but I edited your question to add line numbers to the code for ease of reference rather than repeating all of the code here.

Anyway, I believe the problem is with the else if branch starting on line 10. The sequence of execution will be:

• Line 12 – append the iframe
• Line 13 – make the ajax .load() request
• Lines 18/19 – the end of the branch
• Lines 22-24 – where you have your comment about doing stuff, at which point myHTML has not been assigned a value (hence the error you are getting)
• Line 25 – return from the function

Then, after the asynchronous Ajax request returns:

• Line 16 – the body of the callback function you provided.

This is the way asynchronous code works – no matter how fast the request, the callback won’t be called until after the other code is finished executing. The return statement on line 16 doesn’t return from your mynamespace.html() function, it returns from that callback (and nothing is paying attention to that return).

You could try to restructure your code slightly to use a synchronous ajax request, in which case execution would pause at line 13 until the response comes back, but that provides a poor experience for the user because the browser will be unresponsive in the mean time.

Better to restructure to stick with standard aysnc Ajax, and allow for the order of execution I described above. Without knowing how your mynamespace.html() is called I’m not sure I can advise on that.

I believe you’ve run aground on the “Same Origin Policy”, also sometimes called the “Cross-Domain Security Policy” or other variations on that theme.

You don’t say what types of URL you are entering, but in a general sense JavaScript running in one frame can’t access the content of another frame if the source is from a different domain.

(There are some workarounds to get cross-domain frames to communicate with each other, but only if both are cooperating – which wouldn’t be the case here.)