iframe内部DOM设置样式引发的思考

也许我们的想法一开始就是错的

前情回顾

上篇文章大致分享了web端的拍照方案。一个是input，另外一个是getUserMedia方法，实际上它是webRtc的一个API。

今天聊一个自己项目中遇到的一个关于iframe小问题。问题的背景是这样的, 需要新建一个项目，集成中台服务的登录功能，中台服务提供了一个登录界面的链接，这个链接需要在具体的业务项目中用iframe引入。

问题描述

在自己开发的后台登录界面中使用iframe引入中台的登录界面后，发现登录模块无法居中。于是尝试在iframe自己的项目中透过iframe修改内部的登录模块儿样式。

因为之前有使用过微信二维码登录的经验，所以认为直接修改CSS是可以达到我想要的效果的，但是试过之后不行。于是又想到通过js来控制iframe内部DOM的样式。

• code

  let content = document.getElementById('frame').windowContent.document.getElementById('login-wraper');
  content.style.width = '500px'

试图通过这样的代码去控制iframe中的DOM样式。虽然这种类似的写法在以往的javaWeb项目中使用jquery是可行的，但是这次的使用并没有达到我想要的目的。

重新思考问题

于是又重新审视了自己的问题。iframe内部的DOM中body元素有个min-width:1200px的属性设置，导致我设置iframe的宽高时，iframe总会出现滚动条。而我的目的就是要消除滚动条。

除了设置iframe内部DOM的样式还有别的方法吗？是否可以通过iframe的属性设置来达到目的？于是将iframe标签的相关属性都看了一看，最终通过设置iframe的属性解决问题。

<iframe src="http://xxxxxxxxx" width="375px" height="420px" scrolling="no" frameborder="0"></iframe>

iframe相关属性

• allow用于为<iframe>指定其特征策略。
• allowfullscreen设置为true时，可以通过调用<iframe> 的 requestFullscreen() 方法激活全屏模式。
• height 默认值150。
• width 认值是300。
• importance表示src属性指定的资源的加载优先级。auto,high,low。
• name用于定位嵌入的浏览上下文的名称。
• referrerpolicy表示在获取 iframe 资源时如何发送 referrer 首部。no-referrer,same-origin,strict-origin...
• sandbox该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。
• src被嵌套的页面的 URL 地址。
• srcdoc该属性是一段HTML代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 srcdoc 属性，则会渲染 src 属性表示的内容。
• frameborder值为1（默认值）时，显示此框架的边框。值为0时移除边框。此属性已不赞成使用，请使用 CSS 属性 border 代替。
• scrolling这个属性控制是否要在框架内显示滚动条，允许的值包括：yes,no,auto

总结

• 也许我们每天都在重复使用某个东西，但是对于其中的细节并没有去深入的思考过。
• 也许我们花了很长时间去解决某个问题，但是真正思考一下会发现，我们真正需要解决的是另外一个问题。
• 还是需要透过现象看到事物的本质。

javascript基础知识总结