关于 iframe 的替代选项？答案

【问题标题】：regarding alternative option to iframe?关于 iframe 的替代选项？
【发布时间】：2021-10-12 11:30:50
【问题描述】：

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

部分代码在这里：

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

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

【问题讨论】：

iframe 通常会给用户带来不好的体验。使用普通的 HTML 元素并通过 AJAX 动态更改其内容。另外，请考虑阅读How to Ask 并访问help center。如果我理解正确，您的问题可能会更好。 “请给我”在这里通常被认为是粗鲁的 - 也表达你的问题......一个问题。
但请远离使用ajax时存在的跨域问题
看看这个stackoverflow.com/questions/15146578/…
我对你的问题有点困惑。你能说得更清楚吗？谢谢你:)

标签： javascript html iframe openerp

【解决方案1】：

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

主机站点：在主机站点上，iframe 模仿器可以通过一个简单的 ajax 请求来制作。这是儿童用品。
第一方站点（主机除外）：在您有权访问服务器配置（或至少可以修改标头）的任何站点上，您需要指定标头 Access-Control-Allow-Origin: "host site name here" 以允许主机站点的访问或Access-Control-Allow-Origin: * 以允许每个站点的访问。
第三方站点：在第三方站点上，您必须希望站点的 Access-Control-Allow-Origin 标头设置为 *，否则您需要说服站点的管理员做出例外处理并允许您的网站的访问权限。

如果以上条件都不能满足，那么您将受制于用户的浏览器安全性。部分浏览器支持CORS（跨域资源共享），但不可靠。通常，用户的浏览器会阻止对某些标头的访问（出于安全原因），但如果浏览器提供支持（或安全性足够松散），则可以设置标头以欺骗其他网站让您访问。请注意（如果允许），有些人可能会考虑这种边缘黑客行为，并且未经所有相关方的许可可能不应该使用它。

$(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>

【讨论】：

【解决方案2】：

我在这篇文章中发现了这个 - 可能值得a try

Alternative to iFrames with HTML5

<object data="http://www.web-source.net" width="600" height="400">
        <embed src="http://www.web-source.net" width="600" height="400">
        Error: Embedded data could not be displayed.
    </object>

【讨论】：

【解决方案3】：

我觉得你可以用jQuery load:

<div id="divId"></div>
<script type='text/javascript'>
    $(document).ready(function (){
        $('#divId').load(URL of target);     
    });
</script>

【讨论】：

【解决方案4】：

您可以使用 Ajax 或 jQuery 作为 iframe 的替代方案。我觉得 jQuery 会简单得多。您可以简单地实现它：

$('#SampleElement').load('YourURL');

这里，SampleElement 是给定元素的 ID。

【讨论】：