Full cross-domain high adaptive solution for IFRAME

Source: Internet
Author: User
Tags copy hash window domain

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.