如何用Javascript为iframe内部内容应用CSS？求排查代码问题

我来帮你分析下代码里的问题，以及为什么你没法给这个iframe添加自定义CSS：

1. 首先是代码的语法错误 #

你的JavaScript代码末尾有一段多余的;#000000';，这会直接导致JS解析报错，代码根本无法正常执行。修正语法后的基础代码应该是这样的：

$('iframe').load(function() {
  $('iframe').contents().find("head").append($("<style type='text/css'> .panel-body{background: red !important;} </style>"));
});

2. 核心问题：浏览器的同源策略限制 #

就算你修正了语法，也没法实现效果——因为你嵌入的iframe来自https://www.investwell.in，和你的页面域名属于不同的源（域名、协议、端口任意一项不同都算跨域）。

浏览器的同源安全策略会严格禁止父页面的JS访问跨域iframe的DOM内容，所以$('iframe').contents()这一步会被浏览器直接拦截，根本获取不到iframe内部的head元素，自然没法插入自定义CSS。

可行的替代方案 #

• 如果你能控制investwell.in的页面代码：可以直接在目标页面里添加你需要的CSS，或者利用当前URL里的obgl=eeeeee、ol=222222这类参数（看起来是官方提供的样式自定义参数），调整这些参数值来实现类似的样式效果。
• 如果你无法控制目标网站：
  • 可以尝试用自己的服务器代理加载该页面内容（把目标页面拉到自己的域名下再嵌入，注意这可能涉及版权合规问题，需要谨慎操作）；
  • 检查目标网站是否提供了官方嵌入API或样式自定义文档，优先用官方支持的方式调整样式。

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