剪贴板实现跨域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下有对应的剪贴板函数,也可以类似实现。

查看更多关于, , , 的内容。

你可能感兴趣的
相关文章

沙发

(Required)
(Required, not published)

guest | 注册 | BBS | 管理 | English | 繁體

阅微堂

We feel the room swayin’

Loading...
Loading...
Loading...