跨域实现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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示