iframe的运用---特别是获取父子页面的元素

简介: iframe的运用---特别是获取父子页面的元素

iframe的运用---特别是获取父子页面的元素


TL;DR

  • 使用<iframe src="./iframe.html" frameborder="0" scrolling="auto" name="iframe"></iframe>
  • 同域的情况下,当前页面获取iframe页面里面的元素的话,必须使用加载事件,window.frames.iframeName.onload = ...window.frames.iframeName.document就是iframe的document
  • 同域的情况下,子页面获取父页面元素的话,window.parent.document就是父页面的document
  • 查看示例demodemo地址

简单的概念

  • iframe功能:能够将另一个HTML页面嵌入到当前页面中。
  • 父页面:iframe元素存在的页面,也就是当前页面
  • 子页面:iframe的src的页面,也就是当前页面里面嵌套的页面
  • 同域:子页面和父页面的地址同域(协议端口域名均相同)
  • 跨域:子页面和父页面的地址跨域
  • !!!跨域的父子页面不能进行获取元素的操作,只能有显示的操作
  • 查看示例demodemo地址

简单使用和属性介绍

<iframe src="./iframe.html" frameborder="0" scrolling="auto" name="iframe"></iframe>

属性如下:

  • frameborder:是否显示边框,1(yes),0(no)
  • height:框架作为一个普通元素的高度,建议在使用css设置。默认值为150px。
  • width:框架作为一个普通元素的宽度,建议使用css设置。
  • name:框架的名称,window.frames[name]时专用的属性。
  • scrolling:框架的是否滚动。yes,no,auto。
  • src:内框架的地址,可以使页面地址,也可以是图片的地址。
  • srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持。
  • sandbox: 对iframe进行一些列限制,IE10+支持

当前页面获取iframe页面的元素---必须是同域

window.frames可以获取页面所有的iframe元素。 获取iframe的的window:

  • window.frames.iframeName,主要这里的iframeName是iframe的name属性值。这时候就可以用window的一系列属性了。
  • 或者,document.getElementById("frameid").contentWindow
  • 这里特别注意,必须等iframe页面都加载完了才能获取iframe里面的元素,window.frames.iframeName.onload = funcetion(){...}
<!-- index.html -->
<iframe src ="/iframe.html" id="test" name="test" scrolling="yes">
 <p>Your browser does not support iframes.</p>
</iframe>
<script>
  // iframe.html里面的window
  var iwindow_alias = document.getElementById("testid");
  var iwindow = window.frames.test;
  // 获取iframe的元素就需要在iframe加载后
  iwindow.onload = function() {
    // iframe.html里面的document
    var idoc = iwindow.document;
    // iframe.html里面的body
    var ibody = idoc.body;
    // iframe.html里面的元素
    var iele = iwindow.document.querySelector("a");
    console.log(idoc, ibody, iele);
  };
</script>

iframe获取父页面的元素 --- 必须是同域

在iframe页面里,通过访问window.parent,引用它的父框架的window。

<!-- iframe.html  -->
  <button>点击</button>
  <script>
    // index.html里面的window
    var pwindow = window.parent
    // index.html里面的document
    var pdoc = pwindow.document
    // index.html里面的body
    var pbody = pdoc.body
    // index.html里面的a元素之类的
    var pele = pdoc.querySelector('a')
  </script>

iframe的使用

mdn上iframe的使用

判断iframe框架是否加载完成的方法

目录
相关文章
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
55 0
|
6月前
|
JavaScript
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
|
JavaScript
iframe子页面获取父页面元素,或父页面获取iframe子页面的元素
iframe子页面获取父页面元素,或父页面获取iframe子页面的元素
126 0
|
JavaScript 前端开发
jquery控制元素的隐藏和显示的几种方法
jquery控制元素的隐藏和显示的几种方法
574 0
|
JavaScript API
Js:ResizeObserver 接口监视HTML元素尺寸的变化
Js:ResizeObserver 接口监视HTML元素尺寸的变化
107 0
Js:ResizeObserver 接口监视HTML元素尺寸的变化
|
JavaScript 前端开发 容器
DOM(二)——动画,改变HTML,事件,节点,集合
JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。 这种变化通过一个计数器来调用,当计数器间隔很小时,动画看上去就是连贯的
131 0
DOM(二)——动画,改变HTML,事件,节点,集合
|
JavaScript
js基础笔记学习214元素得属性和节点1方式1
js基础笔记学习214元素得属性和节点1方式1
74 0
js基础笔记学习214元素得属性和节点1方式1
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
129 0
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
|
XML JavaScript 前端开发
App自动化之dom结构和元素定位方式(包含滑动列表定位)
App自动化之dom结构和元素定位方式(包含滑动列表定位)