html iframe使用指南

# 简约总结

1、子调用父，父创建方法，子通过 parent.XXX()调用(✔)

2、父调用子，子创建方法，父用过获取子 iframeObj.contentWindow.XXX()调用

3、子传参父，父创建变量参数，子通过 window.parent.XXX = xxx 传递

4、子获取父参数（父传参子），父通过 iframeObj.contentWindow.XXX，子 window.xxx(✔)

# 约定与定义

iframeElement：指的是 iframe 的 DOM 元素表示，即用 document.getElemenetById()等方法获取 DOM 对象
iframeId：指 iframe 的属性 id，如<iframe id="iframeId"></iframe>
iframeName：指 iframe 的属性 name，如<iframe id="iframeName"></iframe>
iframeIndex：从 0 开始编号的 iframe 索引，若页面中有 N 个 frame，则其值范围为 0~n-1
iframeWindow：指的是 iframe 的 window 对象
标准浏览器：符合 W3C 标准的浏览器的统称，如 FireFox
IE 6/7/8（以下简称 IE）和 FireFox 5.0(以下简称 FF)

# 在父页面中获取 iframe 的 window 对象

获得了 window 对象后，就可以调用 iframe 页面中定义的方法等。

# IE 获取 iframe 的 window 对象的 6 种方法来

iframeId
window.iframeId
window.iframeName
window.frames[iframeId]
window.frames[iframeName]
window.frames[iframeIndex]
iframeElement.contentWindow

# FF 获取 iframe 的 window 对象的 3 种方法来

window.iframeName
window.frames[iframeName]
iframeElement.contentWindow

# 总结

为了兼容大多数浏览器，应使用 iframeElement.contentWindow 来获取

<iframe id="iframe1" name="”iframe1”" src="frame1.html"></iframe>
<script type="text/javascript">
  //获取iframe的window对象
  var iframe = document.getElementById('iframe1').contentWindow;
</script>

1
2
3
4
5

# 在父页面中获取 iframe 的 document 对象

标准浏览器可以通过 iframeElement.contentDocument 来引用 iframe 的 doument 对象；

但是 IE 浏览器（又是这斯…）不支持，确切说应该是 IE 6/7，笔者发现在 IE8 中已经可以用此方法来获取了；

当然，因为 document 是 window 的一个子对象，你也可以先获取 iframe 的 window 对象，再通过 window.document 来引用；

总结两方法来获取

<iframe id="iframe1" src="frame1.html"></iframe>
<script type="text/javascript">
  //获取iframe的document对象
  //方法1
  const iframe = document.getElementById('iframe1').contentWindow.document;

  //方法2
  function getIframeDom(iframeId) {
    return document.getElementById(iframeId).contentDocument || window.frames[iframeId].document;
  }
</script>

1
2
3
4
5
6
7
8
9
10
11

# iframe 页面获取父页面的 window 对象

parent：父页面 window 对象

top：顶层页面 window 对象

self：始终指向当前页面的 window 对象（与 window 等价）

适用于所有浏览器，当拿到了父页面的 window 对象后，就可以访问父页面定义的全局变量和函数，这在 iframe 交互里经常用到。

# 父子 iframe 传参

1.子页面调用父页面的参数

1.1 采用 url 传值的方式: ？+ &

// 子 iframe.html
function getParams() {
  const url = document.location.href;
  const ret = url.substring(url.indexOf('?') + 1).split('&');
  ret.push({
    token: +new Date(),
  });
  console.log(ret); // 在本页打印结果
  return ret; // ret结果返回到父页面
}
getParams(); // 调用本函数返回

1
2
3
4
5
6
7
8
9
10
11

1.2 定义 window 变量

// 父 index.html
// 父定义 paramFromParent 传递给子
const childFrameObj = document.getElementById('childFrame');
childFrameObj.contentWindow.paramFromParent = 'userId0007';

// 子 iframe.html
// 子 param 接受父传递的 paramFromParent
const param = window.paramFromParent;
const inputObject = document.getElementsByTagName('input')[0];
inputObject.value = param;

1
2
3
4
5
6
7
8
9
10

2.子页面调用父页面的方法

子页面调用父页面方法，parent.方法名（）即可。

// 父 index.html
// 2.子页面调用父页面的方法
// 父定义方法 parentSay() 给 子调用
function parentSay() {
  const parent = 'parent';
  console.log('子调用父页面\n' + '// 2.子页面调用父页面的方法\n' + '    // 父定义方法 parentSay() 给 子调用');
  return parent;
}

// 子 iframe.html
// 2.子页面调用父页面的方法
// 父定义方法 parentSay() 给 子调用
parent.parentSay();

1
2
3
4
5
6
7
8
9
10
11
12
13

3.子页面向父页面传参

可以理解为在父页面定义了一个变量，子页面调用该变量并且给它赋值。

window.parent.id="123"

// 父 index.html
// 3.子页面向父页面`传参`
// 父页面定义了一个变量parentToken，子页面调用该变量并且给它赋值
let parentToken = 'parentToken';
let Obj = {};
Object.defineProperty(Obj, 'id', {
  enumerable: true,
  configurable: true,
  set: function(val) {
    parentToken = val;
    console.log('parentToken set:', parentToken);
  },
  get: function() {
    return parentToken;
  },
});
console.log('parentToken:', parentToken);

// 子 iframe.html
// 3.子页面向父页面`传参`
// 父定义方法 parentSay() 给 子调用
console.log('parent.parentToken', parent['parentToken']);
parent.parentToken = 'iframeToken';
console.log('parent.parentToken', parent.parentToken);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.父页面调用子页面方法

<iframe name="myframe" src="child.html"></iframe>

调用方法：iframeObj.contentWindow.FUNCTION()

// 父 index.html
// 4.父页面`调用`子页面`方法`
// 子定义方法 childrenSay() 给 父调用
console.log(childFrameObj.contentWindow);
childFrameObj.contentWindow.childrenSay();

// 子 iframe.html
// 4.父页面`调用`子页面`方法`
// 子定义方法 childrenSay() 给 父调用
function childrenSay() {
  const childrenSay = 'childrenSay';
  console.log(childrenSay);
  return childrenSay;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 实践

iframe 实现批量下载

const download = (url) => {
  var iframe = document.createElement('iframe'); //  先创建一个iframe 标签
  iframe.style.display = 'none'; // 不能在页面中被看到，把他隐藏起来，不影响我们使用啊
  iframe.src = url; // 关联上我们的下载地址
  document.body.appendChild(iframe); // 把他绑定在body上才能发挥作用，不然就能孤魂野码了
  setTimeout(() => {
    iframe.remove(); // 实在是无奈之举，iframe 没有onload事件，只能放在setTimeout里清除了，时间稍微大一点，免得zip包太大还没有下载完。
  }, 5000);
};

// 获取地址，遍历，批量下载
const downloadZip = async () => {
  await bookListVM.getZips(); // 获取zips 的下载地址
  bookListVM.zipUrlList.forEach((list) => {
    download(list.url); // 遍历下载每个url
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# css 相关

# 隐藏 iframe 的 scrollBar 问题

date:2021-03-10

鉴于不是所有浏览器都完全支持 scrolling="no" 来隐藏滚动条

如果 iframe 设置了 scrolling="no"，那么 css 也需要设置 overflow: hidden，才能完全将滚动条隐藏掉

<!-- HTML -->
<iframe src="" scrolling="no"></iframe>

<!-- css -->
<style>
  iframe {
    overflow: hidden;
  }
</style>

1
2
3
4
5
6
7
8
9

JyLie

Choose mode