Html 关于 iframe 的替代选项？

regarding alternative option to iframe?

提问by Daya Arade

I am doing a project with my client in which I want open multiple website on single page on browser, for this purpose I used iframebut, I was stuck during openerp frame. In iframeI have set openerp screen also, but problem is that when I create a customer as soon as it gets to the creating time, the wizards are not opened.

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

Some of the code is here:

部分代码在这里：

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

I would like to know of an alternative to <iframe>

我想知道替代方案 <iframe>

回答by Andrew

The ability to access multiple websites, in a browser, via javascript is heavily limited for security reasons. I'm going to call this idea of displaying other webpages via javascript an iframe imitator. For this application, I would set three categories of sites:

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

1. Host Site: on the host site, an iframe imitatorcan be made with a simple ajax request. This is kid's stuff.
2. 1st Party Site (Other than Host): On any site where you have access to server configurations (or at least can modify headers), you will need to specify the header Access-Control-Allow-Origin: "host site name here"to allow the host site's access or Access-Control-Allow-Origin: *to allow every site's access.
3. 3rd Party Site: On third party site's you will have to hope that the site's Access-Control-Allow-Originheader is set to *or else you will need to convince the site's administrators to make an exception and allow your site's access.

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

If none of the above conditions can be met, then you will be at the mercy of the user's browser security. Some browsers support CORS(Cross Origin Resource Sharing), but it is not dependable. Typically, a user's browser blocks access to certain headers (for security reasons), but if the browser provides support (or has loose enough security), then the headers can be set to trick other sites into giving you access. Be aware that (if allowed) some might consider this borderline hacking, and it probably shouldn't be used without the permission of all parties involved.

如果以上条件都不能满足，那么您将受到用户浏览器安全性的摆布。有些浏览器支持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>

回答by Hello-World

I found this in this post - might be worth a try

我在这篇文章中找到了这个 - 可能值得一试

Alternative to iFrames with HTML5

使用 HTML5 替代 iFrame

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

回答by Mike Phils

I think you can use jQuery load:

我认为你可以使用jQuery load：

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

回答by Mehul Tandale

You can use Ajax or jQueryas an alternative to iframe. I feel jQuery would be much simpler. You can implement it simply as:

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

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

Here, SampleElement is the ID of the given element.

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