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

  • innerHTML只读问题 & 两个动态修改Table的js函数 最近做社会实践项目遇到的一个问题,需要动态修改一个表格。本来以为要想修改一行,直接设置新的 tr.innerHTML即可。后来发现在Firefox下可行,但在IE...
  • Dreamhost上的GZIP & Cache 用WordPress的都知道,WordPress可以打开GZIP传输,压缩比率能达到60%到80%。下表是本blog首页在Web Page Analyzer上的测试报告,此页面上包括css, js所有东西加...
  • 用CSS Sprites让网站再加速 我对于blog的速度有着变态的需求. 网站速度与HTML请求数目有很直接的关系,所以我一直没有在网页上放过多的背景图片——注意这里有个网页加速的...
  • 加速blog:关于javascript(css) 这里先谈一下关于javascript和CSS的问题。 压缩你的javascript和css 这里的压缩和前面的GZIP压缩不同,而是压缩空格,去除注释等,调整顺序等。如果你的...
  • 加速blog:处理页面图片 作为文章的或者功能性的或者美学意义上的需求,现在blog越来越丰富多彩,图片也越来越多。 选择合适的图片尺寸 现在数码相机越来越好,动辄800...
(Required)
(Required, not published)

  B | I | U | D | 添加链接 | 插入引用 | 插入代码 | 插入表情 | | + | ?
guest | 注册 | BBS | 管理 | English | 繁體 | https

阅微堂

zhiqiang's personal blog
Loading...
Loading...
Loading...