iframe跨域问题详解

一、iframe跨域问题嵌入别人的网站

在我们的网站引入别人的网站的时候，通常会使用iframe标签，但是，由于同源策略的限制，当我们引入的网站和我们的网站不在同一个域中时，就会出现跨域问题。比如，我们的网站是www.example.com，而我们需要引入的网站是www.example.org，在引入的过程中就会发生跨域问题。

<iframe src="http://www.example.org"></iframe>

此时，我们的浏览器会禁止跨域请求，从而导致iframe无法加载引入的网站。

二、iframe跨域问题代理网址

为了解决跨域问题，我们可以使用代理网址的方法。具体方式是在我们自己的服务器上，搭建一个代理服务器，并在我们的网站中引入这个代理服务器的地址，以代替引入的网站地址。在代理服务器上，我们可以通过跨域请求来获取引入的网站资源，再将资源返回给我们的网站。

<iframe src="http://www.example.com/proxy?url=http://www.example.org"></iframe>

在上述代码中，我们引入的是代理服务器的地址，同时将引入的网站地址作为参数传递给代理服务器，从而实现了跨域访问。

三、iframe跨域问题怎么解决

除了使用代理服务器以外，我们还可以采用其他方法来解决iframe跨域问题。下面是一些常用的解决方法。

1. 跨文档消息传递

跨文档消息传递（Cross-document Messaging，简称postMessage）是HTML5中提供的解决iframe跨域问题的方法。它可以在不同的文档之间发送数据，并且可以跨域。使用该方法的前提是，我们需要在被引入的网站和我们的网站中，分别编写接收和发送消息的代码。

/* 发送消息 */
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('hello', 'http://www.example.org');

/* 接受消息 */
window.addEventListener('message', function(event) {
  if (event.origin === 'http://www.example.com') {
    console.log(event.data); // 输出接收到的数据
  }
});

2. 动态创建iframe的方式

在动态创建iframe的时候，可以设置iframe的sandbox属性，该属性可以对iframe中的内容进行限制。我们可以通过设置sandbox属性，保证iframe中的内容与我们的网站在同一个安全沙箱中，从而避免跨域问题。

var iframe = document.createElement('iframe');
iframe.src = 'http://www.example.org';
iframe.sandbox = 'allow-scripts allow-same-origin';
document.body.appendChild(iframe);

3. 服务器端设置跨域访问

在一些情况下，我们可以在服务器端对跨域访问进行配置。比如，在使用Apache和Nginx作为服务器的时候，可以通过修改配置文件，对跨域访问进行设置。

以Nginx为例，我们可以在Nginx配置文件中添加以下语句：

location / {
  add_header Access-Control-Allow-Origin *;
}

通过以上设置，我们可以允许任意站点访问我们的网站资源。

四、iframe跨域问题session

在使用iframe加载其他网站时，我们可能需要共享session信息，以方便用户在不同网站之间传递数据。但是，由于跨域问题的存在，session信息默认是不能被共享的。为了解决这个问题，我们可以在跨域请求中添加withCredentials属性，并设置为true。同时，在服务器端，需要对请求进行配置，以允许跨域请求中的withCredentials属性。

xhr.withCredentials = true;

五、iframe跨域问题chrome

在Chrome浏览器中，对于一些跨域请求，浏览器会默认阻止，从而导致iframe无法正常加载内容。为了解决这个问题，我们可以在Chrome浏览器中添加启动参数，来禁止跨域阻止。

在启动Chrome浏览器的时候，添加如下启动参数：

--disable-web-security --user-data-dir=C:\ChromeUserData

六、iframe跨域问题cookie

由于同源策略的限制，对于非同源网站，无法通过ajax请求和iframe来获取cookie信息。在处理此类问题时，我们可以在服务器端进行设置，在请求头中加入跨域请求所需要的cookie信息。同时，在服务器端需要对跨域请求进行配置，以允许跨域请求中包含cookie信息。

/* 设置跨域cookie */
document.cookie = "name=value;domain=example.com";

/* 跨域请求中添加cookie信息 */
xhr.withCredentials = true;

七、iframe跨域方法

除了以上提到的方法外，还有一些其它方法可以解决iframe跨域问题，包括JSONP、CORS、WebSocket等。我们可以根据具体情况选择合适的解决方法来解决iframe跨域问题，并在服务器端进行相应的配置。

八、iframe的跨域处理

最近一些浏览器已经对跨域请求进行了处理，对于非同源请求，会在请求头中添加Origin字段，来表示请求的源地址。在响应中，服务器会添加Access-Control-Allow-Origin字段，来表示响应的源地址。通过这种方式，浏览器可以判断是否允许跨域请求，并给予相应的处理。

九、iframe传参接收参数

在iframe中传递参数，我们可以采用url传参、postMessage、hash传参等方式。

下面是使用url传参和postMessage传参的示例代码：

/* Url传参 */
var url = 'http://example.com?id=1&name=Tom';
var iframe = document.createElement('iframe');
iframe.src = url;
document.body.appendChild(iframe);

/* postMessage传参 */
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({id:1, name:'Tom'}, 'http://www.example.com');

结语：

以上是针对iframe跨域问题的详细说明，希望能对大家有所帮助。在实际开发中，我们需要根据实际情况选择适合的解决方法，并在服务器端进行相应的配置，来解决跨域问题。

原创文章，作者：PBNS，如若转载，请注明出处：https://www.506064.com/n/141550.html