Background
The relationship and hierachy of this pages are :
-A.html (domain : domain1.com)
----B.html (domain : domain2.com)
--------C.html (domain : domain1.com)
what's more,
B.html was included inside A.html by means of Iframe (the id of iframe is "mainIframe");
C.html was included inside B.html by means of Iframe (the id of iframe is "proxyIframe");
Issues
I have below functions in C.html(iframe with id "proxyIframe"):
function updateHeight() {
mainIframe = parent.parent.document.getElementById('mainIframe');
newHeigh = parent.parent.frames["mainIframe"].frames["proxyIframe"].location.hash.substr(1);
mainIframe.style.height = newHeigh;
}
function canUpdateHeight() {
if(parent!=null && parent.parent!=null && parent.parent.document!=null &&
parent.parent.document.getElementById('mainIframe')!=null &&
parent.parent.frames["mainIframe"]!=null &&
parent.parent.frames["mainIframe"].frames["proxyIframe"]!=null){
window.setInterval("updateHeight()", 200);
}
}
The issues are : the checking inside the second function won't be passed, so that the first function also won't be triggered. Please note that these function worked in IE7, Chrome11.x, Chrome16.x, Safari5.x, but have issues in Firefox.
Question
What i want to do is make above functions work, but currently i have no idea what's the issues now. it's incorrect to use "parent.parent" ?