iframe.contentWindow 操作iframe

2020-12-21 09:42:42

一、在使用iframe的页面,要操作这个iframe里面的DOM元素可以用:

contentWindow、contentDocument(测试的时候chrome浏览器,要在服务器环境下)

 

1、先获取iframe里面的window对象,再通过这个对象,获取到里面的DOM元素

例:

var ifr = document.getElementById('iframe');  //先获取到了iframe

ifr.contentWindow.document.getElementById('XXX');  //先通过ifr.contentWindow获取到iframe中的window对象,然后通过document.getElementById('XXX'),获取iframe中的DOM

<iframe  src="a.html"  id=""></iframe>

 

注:iframe.contentWindow这里,返回的是iframe的window对象,所以后面可以接着调用document方法,再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。

 

二、在iframe本页面,要操作这个iframe的父页面的DOM元素(即嵌套这个iframe的页面)可以用:

window.parent、window.top(这里的top是获取的顶层,即有多层嵌套iframe的时候使用)

var ifr = document.getElementByTagName('iframe');

ifr.parent.document.getElementById('XXX');

<iframe  src="a.html"  id=""></iframe>

 

三、onload事件

非IE下用法

ifr.onload = function() { //SOMETHING }

 

IE下,需要绑定

ifr.attachEvent('onload',function() { //something });


  • 2019-10-19 11:22:49

    window安装ffmpeg-concat出现的坑和解决办法

    最后还是选择了fluent-ffmpeg,没特效就没特效吧。最起码有声音吗。 ffmpeg-contact也可以有声音,但是需要先提取出来再合并进去,不知道能不能有效同步,果断放弃。

  • 2019-10-19 13:37:44

    v-model里使用过滤器

    档所述过滤器只能用在v-bind指令和{{}}表达式中,v-model中使用过滤器是一种思维误区。 因为v-model里实现数据显示和存储格式的转换应该是双向的。如下例:

  • 2019-10-19 16:35:45

    Vue.directive使用注意

    首先,Vue.directive要在实例初始化之前,不然会报错,还有,定义的指令不支持驼峰式写法,也会报下面同样的错,虽然在源码中没有找到在哪里统一处理大小写,但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以,还是用'-'或者'_'分割吧。

  • 2019-10-21 08:39:54

    vue slot用法以及使用介绍

    通过上面的内容可以知道,在slot组件中引入了slot的子组件,而且又在子组件标签内添加了新的标签内容,但页面上并没有将子组件标签内的标签内容显示出来,

  • 2019-10-21 15:06:27

    yarn详细入门教程

    Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm 面临的少数问题,即:

  • 2019-10-23 10:20:48

    php 去掉 头尾 空格 2种方法

    看似很简单的问题,其实还是有点坑的,首先这里&nbsp;空格转义,不是字符串,直接用trim()是去不掉。