【代码段】根据子页面自动设置iframe标签宽高

Python+Playwright自动化测试-playwright操作iframe(三) iframe 是web自动化里面一个比较头疼的测试场景,在Selenium中处理 iframe 需要切换来切换去非常麻烦。但是在playwright中,让其变得非常简单,我们在使用中无需切换iframe,直接定位元素即可。 阅读详情

【代码段】根据子页面自动设置iframe标签宽高

本段代码功能 ,实现根据iframe加载的子页面的宽度以及高度,自动修改父页面中iframe标签的宽度以及高度 实现子页面的完全展示

配置

配置方法就是在iframe标签中绑定onload事件 οnlοad=”startInit(‘tab_content_desktop’,xxx);
xxx表示设置iframe标签的最小高度 比如说1000 就代表iframe标签高1000
tab_content_desktop iframe标签的id

<iframe  id="tab_content_desktop"  src="" frameborder="0" scrolling="no" onload="startInit('tab_content_desktop',1090);"></iframe>
(function(){
    var browserVersion = window.navigator.userAgent.toUpperCase();
    var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
    var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
    var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
    var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
    var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
    var isIE9More = (! -[1, ] == false);
    function reinitIframe(iframeId, minHeight) {
        try {
            var iframe = document.getElementById(iframeId);
            var minWidth=document.getElementById(iframeId).scrollWidth;
            var bHeight = 0;
            var bWidth = 0;
            if (isChrome == false && isSafari == false){
                bHeight = iframe.contentWindow.document.body.scrollHeight;
                bWidth = iframe.contentWindow.document.body.scrollWidth;}


            var dHeight = 0;
            var dWidth = 0;
            if (isFireFox == true){
                dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
                dWidth = iframe.contentWindow.document.documentElement.scrollWidth;}

            else if (isIE == false && isOpera == false){
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                dWidth = iframe.contentWindow.document.documentElement.scrollWidth;
            }

            else if (isIE == true && isIE9More) {//ie9+
                var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
                var widthDeviation = dWidth - eval("window.IE9MoreRealWidth" + iframeId);
                if (heightDeviation == 0) {
                    bHeight += 3;
                } else if (heightDeviation != 3) {
                    eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                    eval("window.IE9MoreRealWidth" + iframeId + "=" + dWidth);
                    bHeight += 3;
                }
            }
            else//ie[6-8]、OPERA
                bHeight += 3;
            var height = Math.max(bHeight, dHeight);
            var width = Math.max(bWidth, dWidth);
            if (height < minHeight) height = minHeight;
            if (width < minWidth) width = minWidth;
            console.log("height==="+height);
            console.log("width==="+width);
            iframe.style.height = height + "px";
            iframe.style.width = width + "px";
            return;
        } catch (ex) { }
    }
    function startInit(iframeId, minHeight) {

        eval("window.IE9MoreRealHeight" + iframeId + "=0");
        reinitIframe(iframeId, minHeight);
    }
    window.startInit=startInit;
})()
实现js图片在iframe内嵌页面全屏显示的技术方法 iframe是 HTML 中的内联框架元素,它允许你在当前页面中嵌入另一个独立的 HTML 页面。通过使用 iframe,可以将网页分成几个独立的部分,每个部分可以加载不同的网页。上述代码段在网页中嵌入了一个名为的页面,尺寸为宽 500 像素,高 300 像素。 阅读详情

相关推荐

实现iframe自适应高度的jQuery插件详解

本文还有配套的精品资源,点击获取 简介:介绍jQuery对iframe自适应高度插件的原理和使用方法。该插件通过jQuery库动态调整iframe高度以适应其内容,简化了开发者的代码编写,提升了用户体验。详细描述了插件如何通过选择 iframe 、检测内容高度以及设置高度来自动调整 iframe ,同时提供了使用示例和注意事项,包括浏览器兼容性、...

weixin_26907223的博客 1138

跨域从子页面设置父页面iframe高度(前提,两个域名下都有操作权限)

工作中遇到,记录备忘。 http://blog.youkuaiyun.com/ivyandrich/article/details/24372909 之前在论坛里看到有个同学问关于跨域调整iframe高度的问题,正好之前解决过类似问题,鉴于此问题还是有一定的通用性,索性总结一下,记录于此。 具体思路如下: 父页面域名为 : www.a.com IFRAME里子页面

babauyang的专栏 3063

STM32N6实战:FSBL引导XIP运行ThreadX与NetX Duo

在嵌入式系统开发中,程序的存储与执行方式直接影响启动速度和系统实时性。传统MCU常将代码拷贝到内存运行,而高主频处理器则可通过XIP(片外Flash原地执行)技术直接从外部存储取指,省去拷贝过程。但XIP的前提是外部存储器控制器需在上电后第一时间完成初始化,这正是FSBL(第一级引导程序)的核心职责。FSBL负责配置时钟与外部Flash,并将控制权移交给应用。而要让设备具备实时调度与网络能力,可搭配ThreadX实时内核和NetX Duo双协议栈,两者在CubeMX中原生集成,形成一套高性能MCU+外部存储

weixin_29191669的博客 319

让Iframe自动适应高度,可以设置最小高度

//让Iframe自动适应高度function SetWinHeight(obj){var win=obj;if (document.getElementById){if (win && !window.opera){if (win.contentDocument && win.contentDocument.body.offsetH...

weixin_30505751的博客 1684

逆向小记 bd-ticket-guard-client-cert | bd-ticket-guard-client-data 通过现象看本质

依然没什么花哨的直接解析出来,既然这是个X509证书,那么要么是服务器下发,要么是自己生成喽,但是如果是本地直接生成,那服务器还校验个鬼哦!既然是服务器下发的,那服务器又是怎么校验这个证书是自己下发的呢,这就要讲到CA验证了,首先根据上图我们发现证书的Issuer"(颁发者)是。怎么来的呢,因为涉及到逆向咱就不讲了,其实也是涉及到非对称加密的,就是客户端用私钥去签名数据,服务器用上传过去的证书公钥验签的过程!当服务器收到这个证书的时候,会做几件事,首先用自己的公钥解开签名获得解密后的证书hash。

2503_90751789的博客 1205

玄机-Linux权限维持-后门

玄机-Linux权限维持-后门

m0_46439803的博客 764

iframe 子页面修改iframe的高度

iframe 子页面修改iframe的高度@[TOC](iframe 子页面修改iframe的高度) 在父页面里: <iframe src="" id="parentdiv" frameborder="no" border="0" style="border:0px solid gray;width:100%;min-height:100%;overflow-x: hidden;" typ...

HaoPG_Wu的博客 1336

5分钟搞定三网话费余额查询:手把手教你用PHP+HTML搭建查询系统(含API调用避坑指南)

本文详细介绍了如何使用PHP+HTML快速搭建三网话费余额查询系统,涵盖API调用避坑指南、前端UI设计及性能优化。通过统一处理移动、电信、联通三大运营商接口差异,实现高可用查询功能,并提供安全防护与生产部署建议,帮助开发者高效构建稳定可靠的话费查询工具。

weixin_29016833的博客 259

iframe页面嵌套自适应高度解决方案

iframe页面自适应高度解决方案

睡不够 1965

如何运用好DeepSeek为自己服务:智能增强的范式革命 || 目录

1.1 认知增强的三次浪潮1.2 DeepSeek认知增强模型1.3 人机认知耦合协议1.4 认知增强的数学基础。

𝓓𝓸𝓶𝓲𝓷𝓪𝓽𝓲𝓷𝓰 𝓐𝓵𝓵 𝓣𝓱𝓲𝓷𝓰𝓼 1220

2025年全国青少年信息素养大赛初赛真题(算法创意实践挑战赛C++初中组:文末附答案)

2025年全国青少年信息素养大赛初赛真题(算法创意实践挑战赛C++初中组:文末附答案)

王老师青少年编程 3396

iframe自适应高度

其中,padding-bottom的值需要根据iframe的宽高比来计算,例如,如果iframe的宽高比为16:9,则padding-bottom的值为56.25%(9除以16乘以100%)。可以设置iframe标签的高度为0,然后使用padding-bottom属性来设置iframe标签的高度,使其按照原来的比例自适应。这样,当浏览器窗口大小改变时,iframe标签的高度会自动按照原来的比例进行调整,从而实现自适应效果。

zhu_menglu的博客 5323

14、方法论 - 自顶向下与自底向上的结合

本文探讨了如何将自顶向下的规范驱动方法与自底向上的组件构建方法相结合,以形成更加全面的编程理论。通过引入代数法则,简化逻辑关系、提高代码可读性并支持形式化验证,结合实际案例(如智能家居控制系统)展示了如何在设计和实现阶段确保系统的正确性和可靠性。文章还讨论了工具支持的重要性,并提出了未来发展的方向。

lstm7chronicler的博客 173

iframe 实现同一页面跳转

iframe src:该属性指定url,指定iframe讲装载哪个页面。 name:设置该iframe的名字。 scrolling:设置是否在iframe中显示滚动条。该属性支持(yes)(显示滚动条)、no(不显示滚动条)和auto(iframe大小不够时显示滚动条,否则不显示滚动条) height,width:设置高宽,可以是像素值,也可以是百分比。 frameborder:设置是否...

qq_43303896的博客 1598

yolo 图像检测、关键点检测单摄像头测量物体尺寸长度大小

new_distance/real_size (待求物体像素距离与实际距离比值)= distance / metric_length (参照物像素距离与实际距离比值)然后运行size_demo进行要测量的物体进行关节点检测距离;metric_length是上面耳机选取的两个点的实际物理距离,大概6cm;这里用的windows。通过关键点检测识别物体关键点的像素距离,然后参考比例尺计算实际距离。2)关键点算法这里用的现有的进行测试,实际场景需要自己训练。这里拿这模型推理出的关键点坐标进行后续长度计算。

weixin_42357472的博客 2525

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

iframe问题

这种机制通常是在服务器端实现的,可以让动态语言的程序员方便地重用代码和模块,但它并不具有隔离性,包含的代码和资源与它们所属的 HTML 文件共享同一个渲染上下文。如果 iframe 中的内容没有完全加载完成,或者 iframe 中的资源(例如 JavaScript、CSS、图片等)正在下载或执行,那么 iframe 可能会阻塞页面的加载。相对于一般的 DOM 元素,使用 iframe 创建的元素的渲染速度可能会更慢,因为它需要创建和加载一个新的文档,并在浏览器中进行独立的渲染和布局。

m0_61696809的博客 1974

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

javaWeb中的include标签

%@ include file=”date.jsp”%>换成<jsp:include page=”dae.jsp”应的test_jsp.class这 个文件就是编译test_jsp.java这个servlet文件产生的类文件了。这里的java文件就是jsp容器将jsp转化成了servlet而得到的test_jsp.java这个文件。文件.这两个文件得来的方式跟test_jsp.java和 test_jsp.class文件得来的方式一样.再查。服务器用tomcat,引入页面的jsp文件叫test.jsp。

A15315378的博客 2775

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

html调用父类form的表单的id,在Iframe中获取父窗口中表单的值(示例代码)

在Iframe中获取父窗口中表单的值(示例代码)部分代码如下:问题:如何在aa.asp中判断表单(frm)中输入框(BH)的值是否为空?-----------------------------------aa.asp文件测试代码----------------------------------------------function show(){if(document.parentWin...

weixin_42340136的博客 663

php 刷新frame,javascript实现刷新iframe的方法的总结

javascript实现刷新iframe的方法的总结,现在假设存在下面这样一个iframe,则刷新该iframe的N种方法有:第一种方法:用iframe的name属性定位或者第二种方法:用iframe的id属性定位第三种方法:当iframe的src为其它网站地址(即跨域操作时)父页面中存在两个iframe,一个iframe中是一个链接列表,其中的链接指向另一个iframe,用于显示内容。现在当内容...

weixin_30995661的博客 245

《最新出炉》系列初窥篇-Python+Playwright自动化测试-11-playwright操作iframe-上篇

原估计宏哥这里就不对iframe这个知识点做介绍和讲解了,因为前边的窗口切换就为这种网页处理提供了思路,另一个原因就是虽然iframe很强大,但是现在很少有网站用它了。但是还是有小伙伴或者童鞋们私下问这个问题,那么宏哥就单独写一篇关于iframe网页处理的文章。iframe 是web自动化里面一个比较头疼的测试场景,在Selenium中处理 iframe 需要切换来切换去非常麻烦。但是在playwright中,让其变得非常简单,我们在使用中无需切换iframe,直接定位元素即可。

北京-宏哥的博客 1821

php 刷新iframe,JavaScript_js实现刷新iframe的方法汇总,javascript实现刷新iframe的方法的 - phpStudy...

js实现刷新iframe的方法汇总javascript实现刷新iframe的方法的总结,现在假设存在下面这样一个iframe,则刷新该iframe的N种方法有:/";document.frames("refreshAlarm").src="/";注意区别:document.all.refreshAlarm 或 document.frames("refreshAlarm") 得到的是/页面中那个if...

weixin_35713233的博客 185

HTML_iframe内联框架

<!-- iframe 标签 frameborder 框架边框 --> <!--src可直接写目标地址 也可不写转而通过其他方式跳转 但必须使用name属性标记iframe标签--> 代码段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>.

Mudrock__的博客 134

常用引用页面标签的区别

1.  2.  3.  4.  5.  jsp开发时,这五种常用的页面引入标签,到底有什么区别,各自适应场合是什么,相信很多人都不陌生,但又感觉莫林两可的,本文将做一个全面的汇总。  注:本文虽然各方面都涉及到了,但是很多细节还没列出来,后续在开发中还会不断总结不断完善,希望与广大it从业的朋友们多交流,共同进步。  -----------------------------

xubinxuxinyu的专栏 486

include与jsp:include与s:action与s:include与iframe用法汇总(转)

. 2. 3. 4. 5. jsp开发时,这五种常用的页面引入标签,到底有什么区别,各自适应场合是什么,相信很多人都不陌生,但又感觉莫林两可的,本文将做一个全面的汇总。 注:本文虽然各方面都涉及到了,但是很多细节还没列出来,后续在开发中还会不断总结不断完善,希望与广大it从业的朋友们多交流,共同进步。 ----------------------------------

ning109314的专栏 4959

监听动态创建的iframe是否加载完成

监听动态加载iframe是否创建完成,并加载css。

叫我起来,我还能敲代码! 1850
上一篇: 【代码段】原生js限制 input/textarea 区域文字+字符长度
下一篇: 【vue-cli】vue脚手架构建项目引入插件
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值