Skip to content

Instantly share code, notes, and snippets.

@justin-c-rounds
Created June 15, 2013 03:49
Show Gist options
  • Save justin-c-rounds/5786812 to your computer and use it in GitHub Desktop.
Save justin-c-rounds/5786812 to your computer and use it in GitHub Desktop.
Attempting to use zombie in node.js to load content into a dynamically created iframe. Doesn't seem to work. I am new to node.js — what am I doing wrong?
browser = require('zombie');
browser = new browser();
browser.visit('https://dl.dropboxusercontent.com/u/625330/iframe/index.html')
document = browser.document;
iframe = document.createElement('iframe');
document.body.appendChild(iframe)
iframe.onload = function () {
console.log('loaded') // this does not happen
};
iframe.src = 'https://dl.dropboxusercontent.com/u/625330/iframe/frame.html';
// Trying the above commands in node I get:
// iframe.location.href --> 'https://dl.dropboxusercontent.com/u/625330/iframe/frame.html'
// iframe.contentDocument.readyState --> 'loading'
// iframe.contentDocument.body --> null
// Seems like it never loads
//I put some console.log calls in the compiled zombie code (in dom_iframe.js):
HTML.HTMLFrameElement.prototype._attrModified = function(name, value, oldValue) {
var onload, url,
_this = this;
HTML.HTMLElement.prototype._attrModified.call(this, name, value, oldValue);
if (name === "name") {
return this.ownerDocument.parentWindow.__defineGetter__(value, function() {
return _this.contentWindow;
});
} else if (name === "src" && value) {
console.log('HEY THERE') // I see this
url = HTML.resourceLoader.resolve(this.ownerDocument, value);
this.contentWindow.location = url;
onload = function() {
console.log('I AM LOADED') // I never see this
_this.contentWindow.removeEventListener("load", onload);
onload = _this.ownerDocument.createEvent("HTMLEvents");
onload.initEvent("load", true, false);
return _this.dispatchEvent(onload);
};
return this.contentWindow.addEventListener("load", onload);
}
};
@justin-c-rounds
Copy link
Author

I also tried the equivalent just using jsdom and got similar results, so I don't think this is specific to zombie.

@justin-c-rounds
Copy link
Author

Here's a better self-contained script:

browser = require('zombie');
browser = new browser();
browser.visit('https://dl.dropboxusercontent.com/u/625330/iframe/index.html', function () {
    console.log('page loaded, waiting for iframe to load...')
    waiting = true;
    document = browser.document;
    iframe = document.createElement('iframe');
    document.body.appendChild(iframe)
    iframe.onload = function () {
        console.log('iframe loaded!')
        waiting = false;
    };
    iframe.src = 'https://dl.dropboxusercontent.com/u/625330/iframe/iframe.html';
    while(waiting) {
        // waiting forever...
    }
})

@justin-c-rounds
Copy link
Author

If I set browser.debug to true, I get this output:

Zombie: Opened window https://dl.dropboxusercontent.com/u/625330/iframe/index.html 
Zombie: GET https://dl.dropboxusercontent.com/u/625330/iframe/index.html => 200
Zombie: Loaded document https://dl.dropboxusercontent.com/u/625330/iframe/index.html
Zombie: Event loop is empty
page loaded, waiting for iframe to load...
Zombie: Opened window about:blank 
Zombie: Loaded document about:blank
Zombie: Opened window https://dl.dropboxusercontent.com/u/625330/iframe/iframe.html

But then it just hangs. Is the "Event loop is empty" message indicating a problem? I see that although I get "Opened window" with the iframe src, there is no GET request, so it seems like it is never trying to load the resource.

@justin-c-rounds
Copy link
Author

Oh dear, I've been working too much. Of course the while loop is blocking everything. Also the iframe content page is "frame.html" not "iframe.html". Alright, so now if I do:

browser = require('zombie');
browser = new browser();
browser.debug = true;
browser.visit('https://dl.dropboxusercontent.com/u/625330/iframe/index.html', function () {
    console.log('page loaded, waiting for iframe to load...')
    document = browser.document;
    iframe = document.createElement('iframe');
    iframe.onload = function () {
        console.log('iframe loaded!')
    };
    iframe.src = 'https://dl.dropboxusercontent.com/u/625330/iframe/frame.html';
    document.body.appendChild(iframe)
})

I get:

Zombie: Opened window https://dl.dropboxusercontent.com/u/625330/iframe/index.html 
Zombie: GET https://dl.dropboxusercontent.com/u/625330/iframe/index.html => 200
Zombie: Loaded document https://dl.dropboxusercontent.com/u/625330/iframe/index.html
Zombie: Event loop is empty
page loaded, waiting for iframe to load...
Zombie: Opened window about:blank 
Zombie: Loaded document about:blank
Zombie: Opened window https://dl.dropboxusercontent.com/u/625330/iframe/frame.html 
Zombie: GET https://dl.dropboxusercontent.com/u/625330/iframe/frame.html => 200

But the onload doesn't fire. Using addEventListener('load'... also doesn't work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment