是否可以在 iframe 表单中覆盖 css 或注入自定义样式？ [复制]答案

【问题标题】：Is it possible to override the css or inject custom style inside the iframe form? [duplicate]是否可以在 iframe 表单中覆盖 css 或注入自定义样式？ [复制]
【发布时间】：2017-10-19 01:49:07
【问题描述】：

我目前正在处理这个页面： http://www.prosperitycapitaladvisors.com/become-a-prosperity-capital-advisor/ 带有一个名为 infusionsoft（iframe 表单）的嵌入式 javascript 表单，我的客户要求我使其具有响应性。

是否有可能的方法来覆盖 css 或在 iframe 表单中注入自定义样式？

谢谢！

【问题讨论】：

抱歉，我无法通过 CSS 覆盖 iframe 中内容的正文样式。想要更改来自另一个我无法访问的服务器的页面样式，就在 iframe 中

标签： javascript html css wordpress iframe

【解决方案1】：

您可以将 iframe 包装在 div 中，并使用不同的媒体控制 i-frame 尺寸。

browser_ = /iPhone|iPad/i.test(navigator.userAgent);
isInIframe = (window.location != window.parent.location) ? true : false;

iframe {
  border: 0;
}

@media handheld,
only screen and (max-width: 320px) {
  .ReferAFriendWrapper {
    height: 1190px;
  }
}

@media handheld,
only screen and (min-width: 321px) and (max-width: 479px) {
  .ReferAFriendWrapper {
    height: 1190px;
  }
}

@media handheld,
only screen and (min-width: 480px) and (max-width: 639px) {
  .ReferAFriendWrapper {
    height: 960px;
  }
}

@media handheld,
only screen and (min-width: 640px) and (max-width: 750px) {
  .ReferAFriendWrapper {
    height: 760px;
  }
}

@media handheld,
only screen and (min-width: 751px) and (max-width: 768px) {
  .ReferAFriendWrapper {
    height: 600px;
  }
}

@media handheld,
only screen and (min-width :769px) and (max-width: 900px) {
  .ReferAFriendWrapper {
    height: 540px;
  }
}

@media handheld,
only screen and (min-width :901px) and (max-width: 1078px) {
  .ReferAFriendWrapper {
    height: 500px;
  }
}

@media handheld,
only screen and (min-width :1079px) and (max-width :1200px) {
  .ReferAFriendWrapper {}
}

.ReferAFriendWrapper {
  position: relative;
  padding-bottom: 70%;
  /* 16:9 */
  padding-top: 25px;
  margin-top: -0px;
  overflow: hidden;
}

.ReferAFriendWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

<div style="-webkit-overflow-scrolling: touch !important;">
  <iframe src="http://stackoverflow.com/questions/5661868/asp-net-calling-javascript-in-user-control-server-side-method" scrolling="no" border="0" width="800"></iframe>
</div>

【讨论】：

【解决方案2】：

只要是跨域的，就不能编辑任何 iframe，因为这会在安全漏洞方面打开一大堆蠕虫。

虽然如果您显示的 iframe 来自同一个域来源，则可以进行修改。

【讨论】：