Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to solve the cross-domain iframe adaptive height problem". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve the cross-domain iframe adaptive height problem".

Here is the core code loader.js

/ * *

* Cross-domain iframe adaptive height solution

* Author: changyin@taobao.com

* Copyright (c) 2011, Taobao Inc. All rights reserved.

, /

Var Loader = new function () {

Var doc = document,body = doc.body

Self = this

/ / get the parameters in url

GetRequest = function (name) {

Var reg = new RegExp ("(^ | &)" + name + "= ([^ &] *) (& | $)", "I")

R = _ window.location.search.substr (1) .match (reg)

Return (ritual null)? Unescape (r [2]): null

}

/ / get the configuration. The priority of script is greater than the parameters in url.

GetConfig = function () {

Var scripts = doc.getElementsByTagName ('script')

Script = scripts [scripts.length-1]

Return function (param) {

Var p = script.getAttribute (param)

Return p? P: getRequest (param)

}

} ()

/ / Agent height

Proxyheight = 0

/ / id of frame on top page

Frameid = getConfig ("data-frameid")

/ / listen for real-time update height interval

Timer = getConfig ("data-timer")

/ / get the url of the agent

GetProxyuUrl = getConfig ("data-proxy")

/ / create the iframe of the agent

Proxyframe = function () {

Var el = doc.createElement ("iframe")

El.style.display = "none"

El.name= "proxy"

Return el

} ()

/ / reset height

This.resize = function () {

Proxyheight = body.offsetHeight

Proxyframe.src = getProxyuUrl + "? data-frameid=" + frameid+ "& data-frameheight=" + (proxyheight+40)

}

This.init = function () {

Var init = function () {

Body.appendChild (proxyframe)

Self.resize ()

/ / whether or not update

If (! isNaN (timer)) {

Timer = timer

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.