iframe内嵌第三方页面，报跨域错误的原因有哪些

在浏览器的同源策略下，当一个网页的源与另一个网页的源不同，浏览器会认为它们属于不同的域，此时在页面中加载另一个域的资源就会产生跨域问题。iframe是一种嵌入式的HTML元素，允许在一个网页中嵌入另一个网页，如果iframe中嵌入的页面与父页面不同源，就会产生跨域问题。下面是导致iframe跨域错误的原因：

1.协议不同：父页面和子页面使用的协议不同，例如父页面使用https协议，而子页面使用http协议。

2.域名不同：父页面和子页面的域名不同，例如父页面的域名是example.com，而子页面的域名是abc.com。

3.端口不同：父页面和子页面的端口不同，例如父页面的端口是80，而子页面的端口是8080。

4.子域名不同：父页面和子页面的子域名不同，例如父页面的域名是example.com，而子页面的域名是test.example.com。

5.跨域限制：子页面的服务器设置了跨域限制，不允许其他域名的页面调用它的资源。

相关问题

<iframe>跨域内嵌页面报错 Refused to display 'http://39.101.66.223:8080/' in a frame because it set 'X-Frame-Options' to 'sameorigin' 怎么解决

当遇到 `Refused to display` 的错误，通常是因为网页设置了 `X-Frame-Options` 标头，限制了该页面在一个不同源 (`http://39.101.66.223:8080/`) 的 iframe 中显示。这是出于安全原因，防止点击劫持 (Clickjacking)。

要解决这个问题，你可以从以下几个方面尝试：

1. **修改服务器设置**：如果控制着目标页面的服务器，可以将 `X-Frame-Options` 设置更改为 `'allow-from'` 或者 `'none'`，但这需要确保这样做不会引入不必要的风险。对于 `'allow-from'`，你需要指定允许的特定域名或URL。

   X-Frame-Options: allow-from http://yourdomain.com

2. **使用 CORS**：通过配置响应标头，开启跨源资源共享（CORS），允许来自特定源的请求访问资源。这需要目标网站提供适当的 `Access-Control-Allow-Origin` 字段。

3. **如果必要，使用 JSONP**：如果内容是动态加载的 JavaScript，可以考虑使用 JSONP 来绕过同源策略，因为 JSONP 不受 `X-Frame-Options` 控制。

4. **如果iframe嵌入的是第三方服务**：如果无法直接修改对方服务器设置，可以在嵌入的代码中尝试处理这种跨域问题，例如使用 `document.domain` 修改浏览器认为的源。

5. **本地开发环境**：如果是开发者调试，有时会用到 CORS 策略模拟插件（如 Chrome 的 Allow-Control-Allow-Origin 插件），但在生产环境中应避免依赖这种方式。

js如何控制iframe里第三方dom 比如说 控制 id=messse 的元素隐藏

如果需要控制第三方网站的DOM元素，可以通过以下步骤实现：

1. 获取iframe元素和iframe内部的document对象

var iframe = document.getElementById('myIframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

2. 查找目标元素，例如id为"message"的元素

var targetElement = iframeDocument.getElementById('message');

3. 修改目标元素的样式，例如将目标元素隐藏

targetElement.style.display = 'none';

需要注意的是，由于同源策略的限制，如果iframe内嵌的是第三方网站，我们无法直接操作其内部的DOM元素。如果第三方网站允许跨域访问，可以通过postMessage()方法传递消息的方式来实现，如果不允许，则无法直接操作第三方DOM元素。