contentwindow | 易学教程

vue、html与iframe html事件相互调用

阅读更多关于 vue、html与iframe html事件相互调用

一.html文件中引入的iframe标签 1.在父html中调用子iframe html 中的事件通过contentwindow属性 document.getElementById("myiframe").contentWindow.myfunc() 其中 myiframe 为当前的iframe的id, myfunc为iframe html中的事件 2.在iframe html 中调用父HTML 的方法 parent.func() 二.vue页面中引入的iframe标签 1.在vue组件中调用iframe html 中的事件 self.$refs.iframe.contentWindow.myfunc() (1).在vue中设置标识id 并将方法暴露在window中 export default{ data(){ return { vueid:"myid" } }, methods:{ changeNodeMsg(){ alert(0) } }， created(){ let self = this window[this.vueid] = ()=>{ self.changeNodeMsg() } } 在iframe html中使用 window.parent["myid"]()

js 的 iframe 父子页面通信的简单方法

阅读更多关于 js 的 iframe 父子页面通信的简单方法

1、获取子页面的 window 对象在父页面中，存在如下两个对象 window.frames document.iframeElement.contentWindow 可以获取到子页面 window 对象 // iframe id document.getElementById('menuIframe').contentWindow // iframe name window.frames['menuIframe'].window // iframe index 当前窗体的第几个 iframe window.frames[1].window 既然拿到了 window 对象，那函数和DOM就到手了。 2、子 iframe 获取父页面 window.parent 对象 window.top对象 // 判断当前页面是否是 iframe 或顶级页面 window.parent == window window.top == window window.parent 即为当前页面的上一级页面的 window 对象，如果当前页面已是顶层页面，则 window.parent 就是自己。 3、小实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <

iframe父页面与子页面之间的元素获取与方法调用

阅读更多关于 iframe父页面与子页面之间的元素获取与方法调用

父页面与子页面之间的元素获取与方法调用： 1、JS 父调子子调父元素 window.frames[iframe的name属性值]; ① window.parent.document.getElementById("父页面元素ID"); ②window.parent.document.getElementsByTagName("父页面元素标签名")[i]; ③window.parent.document.getElementsByClassName("父页面元素类名")[i]; 方法 ① document.getElementById("子页面元素ID") .contentWindow.子页面方法名; ② document.getElementsByTagName("子页面元素标签名")[i].contentWindow.子页面方法名; ③ document.getElementsByClassName("子页面元素类名")[i] .contentWindow.子页面方法名; window.parent.父页面方法; 2、JQUERY 父调子子调父元素 $(iframe选择器 ).contents().find(iframe中元素选择器); ① $(父页面元素选择器, window.p arent.document); ② window.parent.$( 父页面元素选择器

iframe与父页面、子页面的交互

阅读更多关于 iframe与父页面、子页面的交互

父页面与子页面交互父页面获取子页面的window对象： //原生JS获取方式： var frameWin = document.getElementById( "ifr" ).contentWindow; 或 var frameWin = document.getElementsByTagName( 'iframe' )[ 0 ].contentWindow; 或 var frameWin = document.frames[frameName]; //jQuery获取方式： var frameWin = $( '#ifr' )[ 0 ].contentWindow; 父页面获取子页面的document、body对象： //原生JS获取方式： var frameWin = document.getElementById( "ifr" ).contentWindow; var frameDoc = frameWin.document; var frameBody = frameDoc.body; //jQuery获取方式： var frameWin = $( '#ifr' )[ 0 ].contentWindow; var $frameDoc = $(frameWin.document); var $frameBody = $frameDoc .find( 'body' );

内嵌页面iframe以及和其兄弟iframe的相互传值

阅读更多关于内嵌页面iframe以及和其兄弟iframe的相互传值

主要知识点 1：document.getElementById("ii").contentWindow 得到iframe对象后，就可以通过contentWindow得到iframe包含页面的window对象，然后就可以正常访问页面元素了； 2：$("#ii")[0].contentWindow 如果用jquery选择器获得iframe，需要加一个【0】； 3：$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作; 4：$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以通过这种方式向iframe页面传递参数，在iframe页面window.hellobaby就可以获取到值，hellobaby是自定义的变量； 5：在iframe页面通过parent可以获得主页面的window，接着就可以正常访问父亲页面的元素了； 6：parent.$("#ii")[0].contentWindow.ff; 同级iframe页面之间调用，需要先得到父亲的window，然后调用同级的iframe得到window进行操作；源码源码包含内容

前端iframe标签介绍及使用

阅读更多关于前端iframe标签介绍及使用

使用的场景： (1) 有重复的板块内容显示的时候 # 后端如果是模板渲染方式(得到页面是通过继承的形式)，可以换成iframe来请求直接获取子功能页面 iframe标签的作用： iframe标签可以实现html主页面嵌套html子页面，子页面可以是一个功能页面，在某些时候使用iframe非常的方便 # 所以如果是模板渲染方式的，前端就可以使用iframe标签节省一点网络带宽(传输的内容会少一些，并且主页面不会刷新，只是iframe在请求得到新的资源)。模板渲染和iframe的对比： (1) 子页面通过继承的方式去实现，并且实现了html页面功能的拆分不好的地方：通过继承，表示渲染模板时候，会先去加载继承的页面，再加载子页面，这样模板页面也会在网络传输，这样会占一些无用的带宽使用iframe后：页面通过模板渲染，也仅是某个功能页面，返回的时候，会少返回模板继承的部分 (2) 菜单点击效果(主页面可能有多个菜单)，要在后端提前去渲染好用户点的哪个菜单，才能返回给用户新的页面不好的地方：增加了后端编码的复杂度，需要通过if判断把点击效果也加在标签上面，这样后端又会吃一些cpu的资源使用iframe后：由于前端只是发送src请求(仅改变子页面内容)，主页面不会改变，所以菜单只需写好前端事件即可，这样就会少后端很多模板渲染的麻烦事，可以少渲染一些内容，效率也会提升一点。

【翻译】使用javascript获取iframe的内容

阅读更多关于【翻译】使用javascript获取iframe的内容

Iframe是一个内嵌框架，它允许你任意的加载HTML文件到你现在的document里面，你能够通过“src”属性来动态的加载文件。那么假如你要通过javascript获取Iframe框架里面的内容并且处理它。那么这里有一个例子可以帮助如何去做。并且这些例子通过了FireFox浏览器和IE的兼容。先加载一个简单的Html文件到iframe中来看看效果。然后通过javascript中的 getIframeContent方法来获取文件的内容。 GetIframeDetails.html <html> <body> <iframe id="testFrame" src="FrameContent.html" > </iframe> <a href="#" onclick="getIframeContent('testFrame');">Get the content of Iframe</a> </body> <script> function getIframeContent(frameId){ var frameObj = document.getElementById(frameId); var frameContent = frameObj.contentWindow.document.body.innerHTML; alert("frame content : "

iframe-父子-兄弟页面相互传值(jq和js两种方法)

阅读更多关于 iframe-父子-兄弟页面相互传值(jq和js两种方法)

转载于： https://blog.csdn.net/u013299635/article/details/78773207 效果图：（注意url协议不能以 filter:/ 开头） 1.父级html源码： main.html <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>main</title> <style type="text/css"> iframe{float:left;width:48%;height:500px;margin-left:1%;border:1px solid #eee;background:#ddd;display:table-cell;} </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> var gg="这是main.html变量"; function ggMM() { console.log(gg); } function callIframeMethod() { // js document.getElementById("frame"

详解5种跨域方式及其原理

阅读更多关于详解5种跨域方式及其原理

同源定义如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）。以下是同源检测的示例 URL 结果原因 http://store.company.com/dir2/other.html Success http://store.company.com/dir/inner/another.html Success https://store.company.com/secure.html Failure 协议不同 http://store.company.com:81/dir/etc.html Failure 端口不同 http://news.company.com/dir/other.html Failure 主机不同 1.jsonp script标签是不受同源策略影响的，它可以引入来自任何地方的js文件。而jsonp的原理就是，在客户端和服务端定义一个函数，当客户端发起一个请求时，服务端返回一段javascript代码，其中调用了在客户端定义的函数，并将相应的数据作为参数传入该函数。 function jsonp_cb ( data ) { console . log ( data ); } function ajax (){ var url = "http://xx.com/test.php?jsonp

【contentWindow】与【contentDocument】

阅读更多关于【contentWindow】与【contentDocument】

contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。 contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。【contentDocument】 W3C的标准告诉我们，可以通过Dom对象的contentDocument属性来返回文档对象。 doc= document.getElementById('J_mainframe' ).contentDocument IE6，IE7都不支持，IE8开始支持,需要如此访问 document.frames['J_mainframe'].document; 【contentWindow】 contentWindow属性，这是个只读属性，返回指定的iframe的窗口对象。它虽然不是标准的一部分，但各个主流浏览器都支持。 http://www.cnblogs.com/wkylin/archive/2011/09/26/2191190.html HTML DOM contentDocument 属性 HTML DOM Frame 对象定义和用法 contentDocument 属性以 HTML 对象返回框架容纳的文档。可以通过所有标准的 DOM 方法来处理被返回的对象。语法 frameObject.contentDocument http://www

订阅 contentwindow