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

Posted 2023-02-22

【中文标题】是否可以在 iframe 表单中覆盖 css 或注入自定义样式？ [复制]

【英文标题】：Is it possible to override the css or inject custom style inside the iframe form? [duplicate]

【发布时间】：2017-10-19 01:49:07

【问题描述】：

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

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

谢谢！

【问题讨论】：

抱歉，我无法通过 CSS 覆盖 iframe 中内容的正文样式。想要更改来自另一个我无法访问的服务器的页面样式，就在 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://***.com/questions/5661868/asp-net-calling-javascript-in-user-control-server-side-method" scrolling="no" border="0" ></iframe>
</div>

【参考方案2】：

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

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