Created
June 15, 2013 03:49
-
-
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?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
}; |
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...
}
})
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.
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
I also tried the equivalent just using jsdom and got similar results, so I don't think this is specific to zombie.