剪贴板实现跨域iframe高度自适应
这两天玩xiaonei用到的一个技术,虽说是跨域iframe,但要求对外部网页和内部网页都有编辑权限,所以只能用在一些特殊场合。
如果是域内的iframe,高度自适应非常简单,给iframe加入onload属性即可:
<iframe name=iframeUpload src=index.htm marginwidth=1
marginheight=1 width='100%' scrolling='no' border='0'
frameborder='0'
onLoad='this.height=iframeUpload.document.body.scrollHeight'
target='_blank' style="font-size: 9pt"></iframe>
这样的方法,baidu一下有很多,一些复杂的方式考虑了浏览器差异等,某些情况下更有效更稳定。不过为安全因素,所有游览器都禁止了不同顶级域名的iframe与其父窗口之间的通信,上面的方法也全失效了。
在http://www.ikown.com/html/show-id-106.html提到另一种实现的技巧,不过需要完全征用用户的剪贴板,后来在code的提示下,可以在基本不影响用户剪贴板使用的情况下,做同样的事情。完整代码如下:
<iframe id="cwin" SCROLLING="no"
src="http://othersite/a.html" width="100%"
height="700px" frameborder="0" onload="function
resetIframeHeight(){setTimeout(resetIframeHeight,1000);var
str=window.clipboardData.getData('text'); var
obj=document.getElementById('cwin'); if(str.match(/^frameHeight=
\d+x/)){ obj.style.height=parseInt(str.match(/\d+/))
+'px';window.clipboardData.setData('text',str.replace(/
^frameHeight=\d+x/, "));}}setTimeout(resetIframeHeight,1000);">
</iframe>
下面是http://othersite/a.html的代码
<script type="text/javascript">
function ref() {
var tts = window.clipboardData.getData('text');
window.clipboardData.setData('text',
String ('frameHeight='+document.getElementById("PageEnd").offsetTop) +"x"+tts);
}
</script>
<body onload="ref();"> i love it. </body>
上面方法只对IE有效,FireFox下有对应的剪贴板函数,也可以类似实现。