今天继续完善自己写的跨域iframe自适应高

最新推荐文章于 2024-07-26 15:39:22 发布

原创最新推荐文章于 2024-07-26 15:39:22 发布 · 571 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #function #webkit #null #浏览器 #jquery

Javascript 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一种解决iframe在不同浏览器内核下高度自适应的技术方案。针对webkit内核浏览器中iframe高度设置不准确的问题，通过使用offsetHeight替代clientHeight，实现了iframe高度的精确控制。文中提供了一个名为crossFrame的实用脚本，该脚本兼容多种JavaScript库，并能有效应对DOM动态变化的情况。

上回第三方反应说webkit内核的浏览器下，crossFrame.setHeight()不能设置预期的高度。打开一个短页面的话高度不会缩进，然后经过自己的测试，方向问题确实存在，主要是iframe下取到的document.body.scrollHeight不是实际的高度。

然后到网上搜了一下其他获取高度的方法，试了一下，offsetHeight发现很完美的解决了这个问题。

最后修改了一下之前的js，通过代理服务器，测试效果很好。

这里贴出自己修改后的proxy.js

/* * @create by yansong.pt@taobao.com * @time 2010/12/06 * @for 我的淘宝第三方运用跨域传输 * @description * 如果第三方引用的js库是jquery，那么初时化时的写法是： * $(document).ready(function(){ * crossFrame.init(); * }); * 如果第三方引用的js库是kissy，那么初时化时的写法是： * KISSY.ready(function(){ * crossFrame.init(); * }); * 如果第三方引用的js库是YUI，那么初时化时的写法是： * YAHOO.util.Event.onDOMReady(function(){ * crossFrame.init(); * }); * 或者放在body的最下方: * <mce:script type="text/javascript"></mce:script> * 注： * 如果DOM结构是动态改变的话使用：setInterval(crossFrame.setHeight, 500); * 使用crossFrame.setHeight之前必须先初始化，也就是crossFrame.init(); * 如果想自定义高度的话，直接：crossFrame.init(500)//500为假设的高度 */ crossFrame = (function(){ var handle = {}; // 如果当前页面的域为我的淘宝就马上执行，但是本身这个js的域也和我的淘宝不一样，也就不能执行下面的语句了， // 所以忽略，还是在对应的页面里加上里面的那句话：window.top... 记得把页面的域变成taobao.com /*if(/taobao/.com/.test(document.domain)){ window.top.document.getElementById('crossFrame').style.height = document.location.hash.substring(1)+'px'; }*/ // 当引用的iframe高度随时变化时使用： // 外部调用时为： setInterval(crossFrame.setHeight, 500); handle.setHeight = function(){ var frame = document.getElementById('crossFrame'), height = handle._height(); if(!frame)return; if(frame.src.split('#')[1] != height){ var parent = frame.parentNode; parent.innerHTML = parent.innerHTML.replace(/#(?:.*?)"/,['#',height.toString(),'"'].join('')); parent = null; } frame = null; } //第一次设置iframe的高 //想来想去觉得加上url完全没有必要，所以去掉了之前的url，然后换成了height方便自定义高度 handle.init = function(height){ var el = document.createElement('div'), arr=['<iframe src="http://i.taobao.com/myProxy.htm#']; el.style.display = 'none'; document.body.appendChild(el); if(typeof height === 'undefined' || isNaN(height)){ height = handle._height(); } arr.push(height.toString()); arr.push('" mce_src="http://i.taobao.com/myProxy.htm#'];" style="display:none" mce_style="display:none" id="crossFrame"></iframe>'); el.innerHTML = arr.join(''); //避免多次调用 handle.init = function(){}; el = null; } handle._height = function(){ //iframe下webkit内核的浏览器取到的clientHeight有误，故用offsetHeight代替。 return /AppleWebKit/.test(navigator.userAgent) ? document.body.offsetHeight : document.body.clientHeight; } return handle; })();