关于window和document 及iframe

最新推荐文章于 2025-12-21 18:16:17 发布

原创最新推荐文章于 2025-12-21 18:16:17 发布 · 1.6k 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#iframe #window #document

Window 对象表示一个浏览器窗口或一个框架,它是一个顶层对象,而不是另一个对象的属性.

document 对象代表整个HTML,可用来访问页面中的所有元素：document是window的一个子对象

框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

通过window获取iframe

window.frames是个伪数组，可以通过window.frames[index]或window.frames[name]来获取iframe
window.frames[index],索引是从左往右，从上往下的，从0开始，通常我们使用window.frames[name]来获取frame

通过iframe获取window、document

如果想获取iframe里的window或者document，可以使用
iframe.contentWindow、iframe.contentDocument
iframe.contentDocument=iframe.contentWindow.document，不过iframe.contentDocument在IE8及以下的版本不支持。

window获取顶级窗口、父窗口

获取顶级窗口：window.top
获取父级窗口：window.parent

setIframe() {
    let iframe = document.getElementById('detailFrame') as HTMLIFrameElement;
 
    iframe.onload = () => {
      // 获取到iframe文档
      let iframe_document = iframe.contentWindow.document;
      // 修改头部的编码方式  --测试无效
      let head = iframe_document.getElementsByTagName('head');
      // head[0].innerHTML = head[0].innerHTML + '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />/n';
      var oMeta = document.createElement('meta');
      oMeta.setAttribute("charset", 'gbk');
      head[0].appendChild(oMeta);
      // iframe页面缩放  无法使用css直接调整iframe内部样式
      let width = document.body.clientWidth;
      let zoom = Math.floor(width / 750 * 100) / 100 - 0.05;
      let html = iframe_document.getElementsByTagName('html');
      html[0].style.zoom = `${zoom}`;
    }
  }

注:文章主体内容摘抄其他文章