javascript - 关于 iframe 的替代选项？

Question

我正在和我的客户一起做一个项目，我想在浏览器的单个页面上打开多个网站，为此我使用了 iframe但是，我在 openerp 框架中被卡住了。在 iframe我也设置了 openerp 屏幕，但问题是当我一到创建时间就创建客户时，向导没有打开。

部分代码在这里:

<iframe src="http://localhost:8069" name="mainFrame" >

我想知道 <iframe> 的替代方案

Answer 1

出于安全原因，在浏览器中通过 javascript 访问多个网站的能力受到严重限制。我打算将这种通过 javascript 显示其他网页的想法称为 iframe 模仿器。对于此应用程序，我将设置三类站点:

1. Host Site:在主机站点上，可以使用简单的 ajax 请求制作一个 iframe 模仿器。这是 children 的东西。
2. 第一方站点(主机除外):在您有权访问服务器配置(或至少可以修改 header )的任何站点上，您需要指定 header Access- Control-Allow-Origin: "host site name here" 以允许主机站点的访问或 Access-Control-Allow-Origin: * 以允许每个站点的访问。
3. 第三方网站:在第三方网站上，您必须希望该网站的 Access-Control-Allow-Origin header 设置为 *，否则您将需要说服网站管理员破例并允许访问您的网站。

如果以上条件都不能满足，那么你就要任由用户的浏览器安全摆布了。一些浏览器支持 CORS (跨源资源共享)，但它不可靠。通常，用户的浏览器会阻止对某些 header 的访问(出于安全原因)，但如果浏览器提供支持(或具有足够的安全性)，则可以将 header 设置为欺骗其他站点让您访问。请注意，(如果允许的话)有些人可能会认为这是一种边缘性的黑客行为，未经所有相关方的许可，可能不应使用它。

$(document).ready(function() {
  var target_domain = "www.web-source.net";
  var protocol = "http://";
  var path = ""; //e.g. "/index.html"
  var target_host = protocol + target_domain;
  var target_URI = target_host + path;
  var method = "GET";
  $.ajax({
    url: target_URI,
    type: method,
    headers: {
      "X-Requested-With": "", //nullifies the default AJAX value of "XMLHttpRequest"
      "Origin": target_host, //lies to the target server
      "Referer": target_host, //lies to the target server
      "X-Http-Method-Override": method, //forces the specified method
    },
    crossDomain: "true" //applies cross domain settings
  });
});
$(document).ajaxSuccess(function() {
  $("#iframe_imitator").html(xhr.responseText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="iframe_imitator"></div>