重拾初心，回味iframe-一一网

这是我参与更文挑战的第23天，活动详情查看：更文挑战

前言

啊这，都1202年了，iframe居然还没废掉，我前年就唱衰它了啊。

是的，这是我当时第一反应，起因是公司的项目突然要多端显示，但是之前只考虑了移动端做的开发，所以只有手机端的尺寸，而电脑端和pad平板的尺寸是不同的。

直接访问的话，样式就崩了，所以临时替代方案用iframe包一下，先用着。

然后就开始了快乐的包装之路了。

直接上手

<body>
  <iframe src="porject.company.cn" frameborder="0" width="300" height="500"></iframe>
</body>
复制代码

因为iframe看似是双标签，但是并不能直接把内容写在标签内，只接受通过src引入的目标地址的网页。

即便对于目标网页的地址没有很大的限制，但是如果是自己的项目因为一些原因要用到的话，还是有一些注意事项的。

盲猜写在iframe标签中间的内容。会在不支持iframe标签的时候显示。

所以如果项目中需要上线的使用的话，需要做一点点小动作。

上线的小动作

首先是要同源。

本文的主要重点是后面的父子通信（实际上是被引入的网页获取往前页面的一些信息）；

而要完成这一点，最重要的就是同源，这里列下我修改之后的服务器文件目录；

root
|
|--index.html
|--target
|   |-- index.html
|--father
|   |--index.html
复制代码

为了方便理解，这里解释下， target指存放打包后项目的目录， father指通过iframe引入target的目录。我在公司的文件夹直接是m和x，不是偷懒，是为了用户在访问的时候，路径看起来不那么引人注意。

感受一下：很明显后者虽然语义化不强，但是不够吸引人，不会让用户想着是什么意思。

localhost/father/

localhost/x/

改完目录结构之后，就可以在father目录下的index使用iframe引入最终需要呈现的网页了（记得去掉边框）。

父子通信

这里说的父子通信，是因为我需要获取到用户访问时，实际的网页宽高来判断一些参数的赋值。

所以这里主要讲讲可以用到的一些BOM方法及其作用。

// target/index.html > script

parent.document.xx
parent.window.xx

top.document.xx
top.window.xx
复制代码

document和window后面的参数和js获取当前层级没什么大的区别，

大概就是document.getElementById()。 window.screen.width，具体可以看自己需求

这里说说parent和top的区别。

直译一下， parent: 父母亲， top：顶部

那么他们获取的层级也如翻译一样， parent获取父级的document/window， top获取最顶层的document/window.

根据需求使用，我在需求中，是需要获取用户视角下的可视区域宽高，所以虽然只是套了一层，但是为了以防万一，用的是top.window.innerWidth/innerHeight;

毕竟需求这东西了，天天变，天天变，唉呀。

结尾

虽然iframe是很老的标签了，在我心里也把他定义为过时，老土。但是需要用到的时候还是真香啊。

最后附一份document和window的宽高列表吧

window

window.innerWidth //除去菜单栏的窗口宽度
window.innerHeight//除去菜单栏的窗口高度

window.outerWidth//包括菜单栏的窗口宽度
window.outerHeight//包括菜单栏的窗口宽度

window.screen.height//电脑屏幕的高度
window.screen.width//电脑屏幕的宽度

window.screen.availHeight//电脑屏幕的可利用高度
window.screen.availWidth//电脑屏幕的可利用宽度

window.screenTop//浏览器距离屏幕的高度
window.screenLeft//浏览器距离屏幕的宽度
复制代码

document

document.body.clientWidth//指元素的自身宽度（包括padding）
document.body.clientHeight//指元素的自身的高度（包括padding）
document.body.clientLeft//子级div内容位置到父级内容区域的宽度距离(即border值)
document.body.clientTop//子级div内容位置到父级内容区域的高度距离(即border值)

document.body.offsetWidth//指定元素的宽度（包括padding，border和内容）
document.body.offsetHeight//指定元素的高度（包括padding，border和内容）
document.body.offsetTop//距离父级元素的高度
document.body.offsetLeft//距离父级元素的宽度

document.body.scrollWidth//获取的是文档的宽度（当指定的宽度小于浏览器窗口的时候，为浏览器的宽度）
document.body.scrollHeight//获取的是文档的高度（当指定的高度小于浏览器窗口的时候，为浏览器的高度）
document.body.scrollTop//文档被滚动上去的时候（即滚动条往上滚动的距离）
document.body.scrollLeft//文档被滚动右去的时候（即滚动条往右滚动的距离）
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端