See this demand is in the dark, but also can handle a knowledge point. Haha, after a day's struggle, sure enough, and after the Yiwen fly guidance, in the Cross-domain problem solving also has a breakthrough (not through the hash).
See demo, compatible Ie,ff,safari.
Programme Description:
The requirements are: a page (taobao.com) to embed B page (Alibaba.com), because the height of the B page can not be determined, so requires a high degree of adaptive.
WORKAROUND: Simply create an IFRAME C with a domain in the B page to allow communication between C and a to pass the height of B.
So how do you pass it? The previous approach was to change the location.hash of parent.parent (ie a) in C, but the hash would generate a browser history, and a backward forward button user experience would be poor. We tried to take frames[B].frames[c].location.hash on page A and actually get it.
The rest is simple, set the IFRAME B load in a to get the hash of C, and then set the height of IFrame B through the hash.
Specific code:
A page: (Based on Yui)
copy content to clipboard
Code:
/**
* Execute function after IFRAME loading
*
* @param {Element} el
* @param {Function} func
*/
var oniframeload = function (El, func) {
var cb = function () {
try {
Func.call (this);
catch (e) {}
}
if (TB.bom.isIE) {
El.onreadystatechange = function () {
if (el.readystate = = ' complete ') {
settimeout (CB, 0);
El.onreadystatechange = null;
}
}
} else {
El.onload = function () {
settimeout (CB, 0);
El.onload = null;
}
}
};
/**
* Cross-domain iframe highly adaptive encapsulation
*
* @param {String} name
*/
var crossdomainiframe = function (name) {
var iframe = YAHOO.util.Dom.get (name);
var xclient = ' xclient ';
Oniframeload (IFRAME, function () {
try {
var h = frames[name].frames[xclient].location.hash.substring (1);
if (H = = "") {
var func = Arguments.callee;
settimeout (function () {func ();}, 20);
Return
}
Iframe.style.height = h+ ' px ';
catch (e) {}
});
};
Perform
Crossdomainiframe (' frame_content ');
b page:
copy content to clipboard
Code:
(function () {
function Addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload!= ' function ') {
Window.onload = func;
} else {
Window.onload = function () {
Oldonload ();
Func ();
}
}
}
function Adjust () {
var h = document.documentElement.scrollHeight | | Document.body.scrollHeight;
try {
if (document.getElementById (' xclient ')) {
var divel = document.getElementById (' xclient '). parentnode;
Console.log (document.getElementById (' xclient '). parentnode);
DivEl.parentNode.removeChild (Divel);
}
var el = document.createelement (' div ');
el.innerhtml = ';
Document.body.appendChild (EL);
catch (e) {}
}
Addloadevent (adjust);
})();
C Page: Empty page, there is a file to avoid 404 to occur