如何修改iframe背景色？求助将背景改为#f9f9f8

问题原因 #

你直接给iframe标签添加background-color样式，只能控制iframe元素本身的空白区域（比如加载前、内容未填满iframe容器时），但iframe内部的页面属于另一个域名，受浏览器同源策略限制，你无法直接修改内部页面的背景样式。

可行解决方案 #

由于跨域限制没法直接修改iframe内部样式，可通过以下方式实现近似效果：

• 给父容器设置目标背景色，消除间距
  将iframe放在设置了#f9f9f8背景色的容器中，同时去掉容器和iframe的内边距、外边距，让容器背景色在iframe加载前后或边缘区域显示，视觉上达成统一：

  <div style="text-align:center; background-color:#f9f9f8; padding:0; margin:0;">
    <iframe 
      src="https://www.mortgagecalculator.org/webmasters/?downpayment=&amp;homevalue=&amp;loanamount=&amp;interestrate=&amp;loanterm=30&amp;propertytax=&amp;pmi=1&amp;homeinsurance=&amp;monthlyhoa=0"
      style="width: 100%; height: 1210px; border: 0; margin:0; padding:0;"
    ></iframe>
  </div>
  

• 检查嵌入工具的自定义参数
  部分第三方嵌入工具会提供URL参数修改样式（比如背景色），你可以查看该网站的webmasters文档，确认是否有类似bgcolor的参数，添加到iframe的src链接中，让内部页面加载时直接使用目标背景色。

参考代码的效果逻辑 #

参考代码里的父容器背景色能生效，是因为那个小尺寸iframe可能存在透明区域，或者加载时的空白由父容器背景填充，并非直接修改了iframe内部的背景样式。

内容的提问来源于stack exchange，提问作者helpplz