如何根据iframe内嵌页面调整iframe高宽

简介:

问题来自于工作的实例,我的一个域名A的页面,有个iframe,它可能内嵌了另一个域名B的页面,也可能内嵌域名C的页面,但是呢,B和C的页面大小是不一样的,特别是高是不一样的高,那么我如何设置iframe的height属性呢?

这个本质就是跨域设置的问题。

一种解法

B和C提供一个jsonp接口,让有iframe的页面A来调用,这个jsonp接口的目的就是告诉A,我的页面的高宽各是多少。

第二种解法

1 首先给A页面的iframe设置个id,比如id=”aiframe”

2 B和C页面内嵌一段html:

<iframe src=”http://A.com/detail/iframe?height=200&weight=100”></iframe>

3 其中http://A.com/detail/iframe A提供的一个接口,这个接口返回一段js

<script type=”text/javascript”>parent.parent.getElementById(“aiframe”).style.height=”200px”</script>

由于这个接口是动态的,这里返回的200是根据B或者C调用接口的参数返回的。

再由于这个接口和有iframe的A是同域的,所以可以操作iframe的DOM属性。

补充

第二种解法可以做扩充完善:

1 第2步中的B,C内嵌的html可以使用window.innerHeight来自动获取页面

2 第2步中的内嵌html可以替换成一个A的js文件,这个文件做的事情就是append这个A

目录
相关文章
|
Android开发
HBuilder X连接雷电模拟器(手机模拟器)
HBuilder X连接雷电模拟器(手机模拟器)
HBuilder X连接雷电模拟器(手机模拟器)
|
移动开发 小程序 Java
用uniapp开发跨端应用开发打包发布完整指南
用uni-app开发多端项目,一套代码可同时打包出各端小程序、h5和app,uni-app支持通过 HBuilderX可视化界面 和 vue-cli命令行 两种方式创建项目
|
移动开发 前端开发 网络协议
WebSocket协议简介
WebSocket协议简介
2967 0
|
4天前
|
云安全 监控 安全
|
2天前
|
存储 机器学习/深度学习 人工智能
打破硬件壁垒!煎饺App:强悍AI语音工具,为何是豆包AI手机平替?
直接上干货!3000 字以上长文,细节拉满,把核心功能、使用技巧和实测结论全给大家摆明白,读完你就知道这款 “安卓机通用 AI 语音工具"——煎饺App它为何能打破硬件壁垒?它接下来,咱们就深度拆解煎饺 App—— 先给大家扒清楚它的使用逻辑,附上“操作演示”和“🚀快速上手不踩坑 : 4 条核心操作干货(必看)”,跟着走零基础也能快速上手;后续再用真实实测数据,正面硬刚煎饺 App的语音助手口令效果——创建京东「牛奶自动下单神器」口令 ,从修改口令、识别准确率到场景实用性,逐一测试不掺水,最后,再和豆包 AI 手机语音助手的普通版——豆包App对比测试下,简单地谈谈煎饺App的能力边界在哪?
|
9天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1128 7
|
11天前
|
机器学习/深度学习 人工智能 数据可视化
1秒生图!6B参数如何“以小博大”生成超真实图像?
Z-Image是6B参数开源图像生成模型,仅需16GB显存即可生成媲美百亿级模型的超真实图像,支持中英双语文本渲染与智能编辑,登顶Hugging Face趋势榜,首日下载破50万。
724 42
|
15天前
|
人工智能 Java API
Java 正式进入 Agentic AI 时代:Spring AI Alibaba 1.1 发布背后的技术演进
Spring AI Alibaba 1.1 正式发布,提供极简方式构建企业级AI智能体。基于ReactAgent核心,支持多智能体协作、上下文工程与生产级管控,助力开发者快速打造可靠、可扩展的智能应用。
1169 41
|
15天前
|
人工智能 前端开发 算法
大厂CIO独家分享:AI如何重塑开发者未来十年
在 AI 时代,若你还在紧盯代码量、执着于全栈工程师的招聘,或者仅凭技术贡献率来评判价值,执着于业务提效的比例而忽略产研价值,你很可能已经被所谓的“常识”困住了脚步。
934 77
大厂CIO独家分享:AI如何重塑开发者未来十年

热门文章

最新文章