iframe的contentDocument - 腾讯云开发者社区

文章/答案/技术大牛

发布

iframe编程的一些问题

前几天做一个用iframe显示曲线图的demo，发现对iframe的contentDocument绑定 onclick事件都无效，而在页面中对iframe.contentDocument的onclick...属性为undefined；而当iframe去掉src属性后，在对其绑定onclick事件，该事件生效；对比之下才发现原来当对iframe.contentDocument绑定事件时，iframe还没有加载...完毕，此时对于contentDocument虽然可以绑定该事件处理函数，但是却无法执行，因为此时contentDocument为空页面，可以观察到此页面的url为 about：blank...var f = document.createElement('iframe'); f.src = '.....) } 等待iframe加载完毕再绑定事件可解决此问题。

1.1K6 0

iframe自适应高度_html页面自适应

其实就是为了美观，要不然iframe和窗口长短大小不一，看起来总是不那么舒服，特别是对于我们这些编程的来说，如鲠在喉的感觉。...在页面中通过iframe嵌入了另外一个页面后，如何使得页面的这块区域随着iframe的高度自动适应而不会出现蹩脚的上下左右滚动条呢？...下面这个办法就是使用javascript实现iframe高度自适应的，这个可是兼容所有浏览器的，ie，firefox，chrome，opera，safari这些浏览器都能够实现iframe高度自适应的，...; } pTar.width=pTar.contentDocument.body.scrollWidth; } } 具体的使用方法如下(设置id=phpernote的iframe的高度自适应iframe...属性，这篇文章也依然教大家iframe自适应高度的解决办法，希望两篇文章让你对iframe标签有一个更深入的了解。

4.8K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

在 HTML 中包含资源的新思路

要加载并嵌入 SVG 文件，我用了下面的标记： iframe src="signal.svg" onload="this.before((this.contentDocument.body || this.contentDocument...可以用下面的标记加载： iframe src="/images/includespost/htmlexample.html" onload="this.before((this.contentDocument.body...||this.contentDocument).children[0]);this.remove()">iframe> 一个说明这一个：你可能已经注意到，标记片段检查 contentDocument.body...或仅检查 contentDocument。...代码看起来是这样： iframe src="signal.svg" loading="lazy" onload="this.before((this.contentDocument.body||this.contentDocument

5.3K3 0

简单拖拽实现

拖拽的元素必须绝对定位。在实际操作中，犯了一个简单的错误：　　对于iframe元素的事件绑定，需要在src完全加载后进行绑定。...iframe.onload = function(){ iframe.contentDocument.onclick = function(){} ... } 另外，目前版本对于iframe...的拖动有bug，不过可以通过在div中嵌套iframe来实现兼容。...35 // 另外，无法修改事件对象的属性，只能另外添加 36 if(typeof e.layerX == "undefined" || e.layerX...'){ 140 this.contentDocument.onmouseup = this.contentDocument.onmousemove = null 141

1.5K4 0

iframe 自适应高度的多种实现方式

大家好，又见面了，我是你们的朋友全栈君。 iframe高度自适应内容需求：实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。...常用的兼容代码有： function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow...二、多个iframe的情况下 //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔....contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight...iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) } 四、内容宽度变化的iframe

8.9K3 0

iframe基本知识及iframe版本Tab切换

HTML5学堂：本文当中，会依次为大家介绍iframe是什么，为何使用iframe；如何在当前网页中调用iframe中的标签和内容；如何在iframe中调用当前网页中的内容；检测iframe内容是否加载完成...；利用iframe防止钓鱼；如何让iframe中加载的内容决定外层iframe的宽高。...最后还会书写Tab切换的实例。 iframe是什么，为何使用iframe？ iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容。...('h1');但是，contentDocument不兼容IE6和7 如何在iframe中调用当前网页中的内容？...框架'); }); 防止别人使用自己的网站钓鱼为被调用的iframe文件(自己的网站)，添加如下代码： if (window!

4.8K4 0

如何实现iframe(嵌入式帧)的自适应高度

好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数...iframe的名称的列表 //用逗号把每个iframe的ID分隔....//定义iframe的ID var iframeids=["test"] //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 var iframehide...&& dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape dyniframe[i].height = dyniframe...//根据设定的参数来处理不支持iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide=="no")

1.6K2 0

iframe自适应高度原

在网上找了2种方法，经测试都有效，最重要的是要发布后才能看到效果，代码如下： iframe src="zencoding test.html" frameborder...="0" scrolling="no" width='100%' id="content_iframe" >iframe> //自适应 iframe...，并iframe自适应内容的高度 contentDocument: ifrm.contentWindow.document; ifrm.style.visibility = 'hidden';...contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。

2.8K2 0

Cypress web自动化37-cy.wrap() 操作 iframe 上的元素

前言 iframe 是一种常见的 web 页面上遇到的场景，像有些网站的登录就是放到 iframe 里面的。...cypress 如何处理 iframe 上的元素呢，cypress 目前没有提供类似 selenium 上的 switch_to.frame 这种直接切换的方法，得自己封装一个操作方法。...iframe场景打开 https://www.126.com/ 首页，登录的输入框就是嵌套在iframe里面 ? /** * Created by dell on 2020/6/9....不为空 return cy .get('iframe') .its('0.contentDocument.body...注意：iframe 上的操作无法使用快照功能哦自定义命令我们可能会在多个测试用例访问iframe的元素，因此在 cypress 自定义命令 cypress/support/index.js 的文件里面添加一个命令

2.6K1 0

前端进程间通讯的渗透之术

这次介绍另外一种进程间渗透内存的玩法，适用于网页和iframe常见的博弈。...iframe的内容，这两种方法的优点是：子页面的开发商只需要一点点的配合就能实现，主动权掌握在父页面手中。...---- 直接访问同域iframe的内存有一种特殊情况下，不同的进程可以共享内存空间：如果父页面和iframe同域，问题就简单多了，也不必传输序列化数据了，父页面可以直接访问并修改iframe的全局作用域...比如想去掉iframe中的导航栏（nav元素），可以通过下面的代码实现： iframe.contentDocument.querySelector('nav').remove(); 如果只是想隐藏掉...，可以这样： iframe.contentDocument.querySelector('nav').style.display='none'; 想点击某个按钮（button元素）： iframe.contentDocument.querySelector

1.9K3 1

iframe标签属性说明详解

Iframe 标签详解Iframe src=”example.htm” width=”300″ heitht=”100″>IFRAME> example.htm 是被嵌入的页面，标签 IFRAME...下面笔者介绍用iframe来实现的方法。 iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。...、自动显示边框的内嵌帧中让iframe自动适应内容的高度 js代码： function autoResize() { try { document.all["inner"].style.height...window.opera){ //begin resizing iframe pTar.style.display="block" if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight...){ //ns6 syntax pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight; } else if (pTar.Document

4K2 0

contentWindow,

b>contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。...(“body”)[0].appendChild(iobj); return iobj.contentDocument || iobj.contentWindow.document; } 基本使用： 1...$(“#dd”).val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作; 4)$(“#myiframe”)[0].contentWindow.username=”...zhangsan”; 可以通过这种方式向iframe页面传递参数，在iframe页面window.username就可以获取到值，username是自定义的全局变量； 5)在iframe页面通过parent...$(“#frame_A”)[0].contentWindow.document.getElmentById(“#frame_B”); 同级iframe页面之间调用，需要先得到父亲的window，然后调用同级的

6333 0

获得同级iframe页面的指定ID元素的几种实现方法

1.JS实现：　　var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById("元素id");...2.jquery实现：　　var object =$( "元素id", window.parent.frames("iframe的name").contentDocument); iframe获得父页面指定...id的元素的方法：　　var object = $("元素id", window.parent.document); 父页面获得iframe子页面里指定id元素的方法：　　var object =...$(this).contents().find("元素id"); 注：window.frames("iframe的name")、document.frames("iframe的name")和window.frames...["iframe的name"]、document.frames[""iframe的name"]的区别　　1.第一个和第三个具有浏览器的兼容性，第二个和第四个只有在IE和Opera浏览器支持，而别的不支持

2.4K2 0

iframe 解析

简介:iframe在日常的开发中经常用到,本随笔在参考http://blog.csdn.net/cuew1987/article/details/11265153的情况下,将对iframe的常用用法进行总结...1、iframe能解决的问题 (1)、通过iframe能实现跨域 (2)、使用iframe能解决IE6下select遮挡不住的问题 (3)、通过iframe能解决Ajax前进后退的问题 (4)、通过iframe...提示：您可以把需要的文本放置在 iframe> 和 iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。...、contentDocument属性,通过iframe元素的这个属性,可取得子窗口的document对象,该属性兼容向存在问题:Firefox 支持,大于ie8版本的ie支持. (2)、获取子窗口document...("body"[0].appendChild(iobj); return iobj.contentDocument||iobj.contentWindow.document; } (3)、通过

2.5K10 0

JavaScript 处理Iframe自适应高度的问题

window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight)...iframe嵌套的页面加载完毕的时候，运用onload事件来获取嵌套在iframe中网页的高度，然后赋值给Iframe的高度即可。...2.跨域时Iframe高度自适应在主页面和被嵌套的iframe为不同域名的时候，就稍微麻烦一些，需要避开JavaScript的跨域限制。...）嵌套iframe.html（域名为：http://www.phpq.net），当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度...最终实现预期的目标。 iframe主页面main.html < !

2.1K2 0

iframe自适应高度_iframe根据内容自适应高度

大家好，又见面了，我是你们的朋友全栈君。...document.frames[iframe.id].document : ifm.contentDocument; if(ifm != null && subWeb !...document.frames[iframe.id].document : ifm.contentDocument; if(ifm != null && subWeb !...> * 400则为你想要固定的高度版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

6.3K3 0

【HTML】iframe跨域访问问题

概述本地同一浏览器访问本地HTML文件和访问服务器端HTML文件，本地Iframe没有自适应高度，而服务器端的Ifrane自适应了高度。...Chrome访问本地HTML文件呈现的结果 ?...本地访问的HTML文件Iframe没有根据Iframe里面的页面类容自适应高度 2.Iframe自适应高度代码在index.html文件中间中添加Iframe页面,页面加载时，加载src指定的文件路径...document.frames[id].document : ifm.contentDocument; if (ifm != null && subWeb !...Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked

5.2K8 0

网页内容加速黑科技趣谈

操作: iframe.onload = null; // 添加一个虚拟标签: iframe.contentDocument.write('');...// 引用该元素: const streamingElement = iframe.contentDocument.querySelector('streaming-element'); //...将该元素从 iframe 中取出，并添加到文档中: document.body.appendChild(streamingElement); // 写入一些内容 —— 这里应该是异步的: iframe.contentDocument.write...'); // 继续写入内容，直到完成: iframe.contentDocument.write(''); iframe.contentDocument.close...接下来我们只需要从服务端获取 HTML 数据流，每当一个部分的数据到达的时候，就调用 iframe.contentDocument.write()。

3.8K1 0

关于读书的名言名句_contentdescription

没有永恒的技术只有变态的需求，没有好说的客户只有无奈的开发者，如果iframe的出现是一个错误的话，iframe里边在来一个iframe那是错上加错，神话没有在远古的尘嚣中消失，却在怀具的今天不断上演...contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。 contentDocument Firefox 支持，> ie8 的ie支持。...可取得子窗口的 document 对象。在子级iframe设置父级 iframe ，或孙级 iframe 高度。...x.height = secondHeight; // 设置第一层 iframe 的高度 // alert(secondHeight); // alert(‘body...: ‘ + x.contentDocument.body.offsetHeight + ‘ div:’ + thirdHeight); } 转载于:https://www.cnblogs.com/

3764 0

IFRAME

iframe src="health.jsp" frameborder="0" width="1000" scrolling="no" height="100%" id="myframe">iframe> function reinitIframe() {... var iframe = document.getElementById("myframe"); try{ var bHeight... = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight...iframe name="nfrm" id="nfrm" src="about:blank">iframe> <a onmouseover="javascript:document.getElementById

3.5K1 0

点击加载更多

iframe编程的一些问题

iframe自适应高度_html页面自适应

在 HTML 中包含资源的新思路

简单拖拽实现

iframe 自适应高度的多种实现方式

iframe基本知识及iframe版本Tab切换

如何实现iframe(嵌入式帧)的自适应高度

iframe自适应高度原

Cypress web自动化37-cy.wrap() 操作 iframe 上的元素

前端进程间通讯的渗透之术

iframe标签属性说明详解

contentWindow,

获得同级iframe页面的指定ID元素的几种实现方法

iframe 解析

JavaScript 处理Iframe自适应高度的问题

iframe自适应高度_iframe根据内容自适应高度

【HTML】iframe跨域访问问题

网页内容加速黑科技趣谈

关于读书的名言名句_contentdescription

IFRAME

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐