如何用JavaScript/jQuery获取iframe中第三方网站的HTML代码？

嘿，我来帮你搞定这个头疼的问题！你用jQuery提取内嵌第三方网站的iframe内容失败，核心原因是浏览器的同源策略（Same-Origin Policy）在保护用户安全，这是浏览器内置的安全机制，专门阻止不同域名的页面之间随意访问彼此的DOM内容。

为什么你的代码会失败？ #

先补全你可能尝试的提取逻辑，方便理解问题：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Iframe</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
  // 尝试获取iframe的HTML内容
  var iframeContent = $('iframe').contents().find('html').html();
  console.log(iframeContent);
});
</script>
</head>
<body>
<iframe src="https://第三方网站域名"></iframe>
</body>
</html>

如果第三方网站和你的网站不同源（域名、协议、端口任意一个不一样），浏览器就会直接阻止这个操作。你打开浏览器控制台（按F12），应该能看到类似Cross-origin request blocked的错误提示——这不是你的代码写错了，是浏览器的安全规则不允许这么干！

分情况给出解决方案 #

情况1：你能控制第三方网站

如果这个第三方网站是你自己的服务（比如同品牌的子域名站点），可以通过以下方式绕过限制：

• 设置document.domain：在父页面和iframe页面的JS里都加上document.domain = "你的主域名"（比如主域名是example.com，子域名是abc.example.com），浏览器会判定它们同源。
• 使用postMessage通信：让iframe页面主动把HTML内容通过window.parent.postMessage()发送给父页面，父页面监听message事件接收数据，这是现代浏览器推荐的安全跨域通信方式。
• 配置CORS：如果涉及API交互，在第三方网站的服务器上配置CORS响应头，允许你的域名发起访问请求。

情况2：你完全无法控制第三方网站

这种情况下，你没办法直接提取iframe的HTML内容——这是浏览器的安全红线，目的是防止恶意网站窃取用户在第三方网站的敏感数据（比如登录凭证）。
这时候得换个思路：

• 查看第三方网站是否提供登录状态查询API，通过API验证用户登录状态，而非读取iframe的DOM。
• 考虑使用OAuth之类的授权协议，让用户直接在你的页面完成登录，避免嵌套iframe。

最后小提示 #

先打开浏览器控制台看具体错误信息，确认是不是跨域问题——这是排查这类问题最快的方式！

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