How to solve the problem of adaptive height of cross-domain iframe
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
