跨域实现IFRAME自适应高度

IFRMAE请求一个跨域时,而这个跨我们没有操作权限,我们只有加一个HTML文件的权限,如何实现自适应行高
这需要一个中间页面iframe.html

原理:通过改变top.location的hash值,来实现高级的自适应
主页面内容:

复制代码
<iframe name="iframeid" id="iframeid" scrolling="no" width="1000" frameborder="0"
onload
="iframeHeight()"></iframe>
$("#iframeid").attr({ src: http://local.zzl.com/iframe.aspx?url= + cUrl });

//自适应高度,不在同一域的对象,是不能相互操作的,只能通过URL地址把子页面的高度传过来
function iframeHeight() {
var ifm = document.getElementById("iframeid");
var hash = window.location.hash.slice(1);
if (hash && /height=/.test(hash)) {
if (ifm != null) {
ifm.height = hash.replace("height=", "");
}
}
setTimeout(iframeHeight, 200);
}

</script>
复制代码

iframe.html内容(它向主页面通过hash这个瞄点参数向主页面传高度)

复制代码
<iframe name="iframeid2" id="iframeid2" scrolling="no" width="1000" frameborder="0"
src
="" onload="iFrameHeight()"></iframe>

<script type="text/javascript">
function iFrameHeight() {
var ifm = document.getElementById("iframeid2");
var subWeb = document.frames ? document.frames["iframeid2"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height
= subWeb.body.scrollHeight;
// top.location.hash= "#height=" + subWeb.body.scrollHeight; //ie中显示没有权限
var hostUrl = document.referrer;
hostUrl
+= "#height=" + subWeb.body.scrollHeight;
window.top.location
= hostUrl;
}
}
</script>
复制代码

 

posted @   jevan  阅读(404)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示