keithclark / selectivizr

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
1.71k stars 247 forks source link

ContentLoaded fires too soon when inside iframe #24

Open gxclarke opened 12 years ago

gxclarke commented 12 years ago

This issue only occurs for a page within an iframe. It was tested with IE7 and IE8 using jQuery.

The DOM is not ready when applyPatches runs, so selectorMethods always returns an empty list. To validate this I added the following code to the beginning of applyPatches():

var testSelector = ".layout-fluid-sidebar > .col:first-child";
log(jQuery(testSelector).length);
jQuery(function () {
    log(jQuery(testSelector).length);
});

The first value logged is 0 while the second value is 1. There is nothing special about this particular selector. The same behavior occurs no matter which one is tested.

If I open the same page directly rather than from within an iframe, both logged values are 1.

keithclark commented 12 years ago

I'll look into what's causing this behaviour. If you could upload a barebones example of the problem somewhere that would help me a lot.

Does the selectivizr test page pass the <iframe> tests?

gxclarke commented 12 years ago

I downloaded and worked with your test page. I believe the issue is specific to cross domain restrictions. You can reproduce with the following steps:

  1. Edit your local hosts file to point a dummy domain to your local machine: e.g. 127.0.0.1 www.testme.org
  2. Modify line 150 of index.html (the iframe.html test) to use a fully qualified url that refers to your dummy domain: e.g. http://www.testme.org/tests/master/html/iframe.html
  3. Open the iframe page directly in IE7/8 to prove the the page works: http://www.testme.org/tests/master/html/iframe.html
  4. Open the index.html page using your default domain to see the failure of the iframe test: http://localhost/tests/master/index.html

In addition, and in relation to this issue, I also noticed that @import tests for a fully qualified path and a protocol relative path also fail when either the browser url is www.testme.org... or the @import statements in master.css are modified to use www.testme.org.

I have not been able to identify a code fix for this, but I'm happy to help get this resolved in any way I can.

keithclark commented 12 years ago

Thanks for taking time to do that. I'll add your findings to my test page and hopefully recreate the problem and start working on a fix. I assume you updated the CSS paths on lines 24 to 26 of master.css?

gxclarke commented 12 years ago

Confirmed that I did update the CSS paths on those lines.