设置跨域的iframe的高度

简介:

原因

如下图,A域中有个B域的页面,但是B的页面的长度不确定,A无法去设置一个准确的高度。

PS:iframe高度设置auto是无效的

解决办法

 

如上图,

(1)在B页面中加一个A的代理页面的iframe

        PS:这最里面的A页面能调用最外层A页面的方法,而B页面是调用不了最外层A的(因为跨域的安全限制)。

(2)当B页面加载完成时,修改A的agent.html所在iframe里src。

复制代码
setTimeout(function(){
    var _height =  $("#vs-source").height();
    var b_iframe = document.getElementById("crossdomain_agent_iframe");  //agent.html的iframe的id 
                        
    if( b_iframe ){
                                        
        var src = b_iframe.src.split("#")[0] ;
        src = src.split("?")[0] ;
        b_iframe.src =src+"?"+new Date().getTime()+"#"+(b_height+(_height-1000));
    }
},
200) ;
复制代码

(3)agent.html代码调用最外层A页面代码设置B页面高度

agent.html代码如下:

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>frame agent</title></head>
<body>
<script type="text/javascript">
function  pseth() {
   var win = parent.parent ;
    var hashHeight = window.location.hash;
    var tabId = win.$(".ui-tabs-selected:last").find("a").attr("tabid");
    var iframe = win.$("#"+tabId).find("iframe")[0] ;
    win._setIFrameHeight && win._setIFrameHeight(iframe,hashHeight.split("#")[1]) ;    
}
pseth();
</script>
</body>
</html>
复制代码

 弊端

1.B页面需要做修改,加一个iframe和主动设置一次。

   PS:很多时候B页面是第三方的页面,这也是没办法的,需要弄的



本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/3989298.html   ,如需转载请自行联系原作者

相关文章
|
4天前
|
云安全 人工智能 自然语言处理
|
8天前
|
人工智能 Java API
Java 正式进入 Agentic AI 时代:Spring AI Alibaba 1.1 发布背后的技术演进
Spring AI Alibaba 1.1 正式发布,提供极简方式构建企业级AI智能体。基于ReactAgent核心,支持多智能体协作、上下文工程与生产级管控,助力开发者快速打造可靠、可扩展的智能应用。
800 17
|
11天前
|
数据采集 人工智能 自然语言处理
Meta SAM3开源:让图像分割,听懂你的话
Meta发布并开源SAM 3,首个支持文本或视觉提示的统一图像视频分割模型,可精准分割“红色条纹伞”等开放词汇概念,覆盖400万独特概念,性能达人类水平75%–80%,推动视觉分割新突破。
805 59
Meta SAM3开源:让图像分割,听懂你的话
|
2天前
|
人工智能 安全 小程序
阿里云无影云电脑是什么?最新收费价格个人版、企业版和商业版无影云电脑收费价格
阿里云无影云电脑是运行在云端的虚拟电脑,分企业版和个人版。企业版适用于办公、设计等场景,4核8G配置低至199元/年;个人版适合游戏、娱乐,黄金款14元/月起。支持多端接入,灵活按需使用。
236 164
|
9天前
|
搜索推荐 编译器 Linux
一个可用于企业开发及通用跨平台的Makefile文件
一款适用于企业级开发的通用跨平台Makefile,支持C/C++混合编译、多目标输出(可执行文件、静态/动态库)、Release/Debug版本管理。配置简洁,仅需修改带`MF_CONFIGURE_`前缀的变量,支持脚本化配置与子Makefile管理,具备完善日志、错误提示和跨平台兼容性,附详细文档与示例,便于学习与集成。
336 116
|
2天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
368 3
|
6天前
|
弹性计算 搜索推荐 应用服务中间件
阿里云服务器租用价格:一年、1小时及一个月收费标准及优惠活动参考
阿里云服务器优惠汇总:轻量应用服务器200M带宽38元/年起,ECS云服务器2核2G 99元/年、2核4G 199元/年,4核16G 89元/月,8核32G 160元/月,香港轻量服务器25元/月起,支持按小时计费,新老用户同享,续费同价,限时秒杀低至1折。
406 166