blocks|key|692060|text|您可以使用object和embed，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692061|<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>|code-block|syntax|javascript|692062|这并不是什么新鲜事，但仍然有效。我不确定它是否有相同的功能。|692063|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can use object and embed, like so:</p>

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

<p>Which isn't new, but still works. I'm not sure if it has the same functionality though.</p>


blocks|key|691989|text|不，没有等价物。</code></a>元素在HTML5中仍然有效。根据您需要的确切交互，可能会有不同的API。例如，<a+href="https://developer.mozilla.org/en/DOM/window.postMessage"><code>postMessage</code></a>方法可以让你实现跨域的javascript交互。但是如果你想显示跨域的超文本标记语言内容(用CSS设置样式并与javascript交互)，<code>iframe</code>仍然是一个很好的选择。</div><div></div>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element^0|8|78|8|78|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@$9|P|A|Q|1|R]]|E|$]]]|F|$G|$5|H|I|J|E|$K|L]]]]

<p>No, there isn't an equivalent. The <a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element"><code>&lt;iframe&gt;</code></a> element is still valid in HTML5. Depending on what exact interaction you need there might be different APIs. For example there's the <a href="https://developer.mozilla.org/en/DOM/window.postMessage"><code>postMessage</code></a> method which allows you to achieve cross domain javascript interaction. But if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) <code>iframe</code> stays as a good way to do.</p>


blocks|key|476209|text|在HTML5中，object是一个简单的替代方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|476210|​|476211|<object+data="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width="400"
height="300"
type="text/html">
++++Alternative+Content
</object>|code-block|syntax|javascript|476212|476213|您也可以尝试使用embed|476214|476215|<embed+src="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width=200
height=200
onerror="alert('URL+invalid+!!');"+/>|476216|476217|重新-|476218|由于目前，StackOverflow已经关闭了对显示外部URL内容的支持，run+code+snippet不会显示任何内容。但是对于你的网站来说，它将会工作的很好。|476219|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object|1|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed^0|8|6|8|6|0|0|0|0|0|8|5|8|5|1|0|0|0|0|0|11|G|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|P|3|G|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1N|8|@]|D|@]|E|$K|L]]|$1|S|3|G|5|6|7|1O|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1P|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]|15|$5|10|11|12|E|$13|16]]]]

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" rel="nofollow noreferrer"><code>object</code></a> is an easy alternative in HTML5:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;object data="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width="400"
height="300"
type="text/html"&gt;
    Alternative Content
&lt;/object&gt;</code></pre>
</div>
</div>
</p>
<p>You can also try <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" rel="nofollow noreferrer"><code>embed</code></a>:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;embed src="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width=200
height=200
onerror="alert('URL invalid !!');" /&gt;</code></pre>
</div>
</div>
</p>
<h2>Re-</h2>
<p>As currently, StackOverflow has turned off support for showing external URL contents, <code>run code snippet</code> is not showing anything. But for your site, it will work perfactly.</p>


blocks|key|692200|text|如果要执行此操作并控制提供基页或内容的服务器，可以使用跨域资源共享(http://www.w3.org/TR/access-control/)来允许客户端JavaScript通过XMLHttpRequest()将数据加载到<div>中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|692201|//+I+safely+ignore+IE+6+and+5+(!)+users
//+because+I+do+not+wish+to+proliferate
//+broken+software+that+will+hurt+other
//+users+of+the+internet,+which+is+what
//+you're+doing+when+you+write+anything
//+for+old+version+of+IE+(5/6)
xhr+=+new+XMLHttpRequest();
xhr.onreadystatechange+=+function()+{
++if(xhr.readyState+==+4+&&+xhr.status+==+200)+{
++++document.getElementById('displayDiv').innerHTML+=+xhr.responseText;
++}
};
xhr.open('GET',+'http://api.google.com/thing?request=data',+true);
xhr.send();|code-block|syntax|javascript|692202|现在，对于整个操作的关键部分，您需要为您的服务器编写代码，该代码将为客户端提供Access-Control-Allow-Origin标头，指定您希望客户端代码能够通过XMLHttpRequest()访问哪些域。下面是一个PHP代码示例，您可以将其包含在页面顶部，以便将这些标头发送给客户端：|692203|<?php
++header('Access-Control-Allow-Origin:+http://api.google.com');
++header('Access-Control-Allow-Origin:+http://some.example.com');
?>|692204|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/access-control/^0|2H|G|33|5|Y|10|0|0|0|13|R|2B|G|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>If you want to do this and control the server from which the base page or content is being served, you can use Cross Origin Resource Sharing (<a href="http://www.w3.org/TR/access-control/" rel="noreferrer">http://www.w3.org/TR/access-control/</a>) to allow client-side JavaScript to load data into a <code>&lt;div&gt;</code> via <code>XMLHttpRequest()</code>:</p>

<pre><code>// I safely ignore IE 6 and 5 (!) users
// because I do not wish to proliferate
// broken software that will hurt other
// users of the internet, which is what
// you're doing when you write anything
// for old version of IE (5/6)
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
    document.getElementById('displayDiv').innerHTML = xhr.responseText;
  }
};
xhr.open('GET', 'http://api.google.com/thing?request=data', true);
xhr.send();
</code></pre>

<p>Now for the lynchpin of this whole operation, you need to write code for your server that will give clients the <code>Access-Control-Allow-Origin</code> header, specifying which domains you want the client-side code to be able to access via <code>XMLHttpRequest()</code>. The following is an example of PHP code you can include at the top of your page in order to send these headers to clients:</p>

<pre><code>&lt;?php
  header('Access-Control-Allow-Origin: http://api.google.com');
  header('Access-Control-Allow-Origin: http://some.example.com');
?&gt;
</code></pre>


blocks|key|476109|text|这似乎也是有效的，尽管W3C指定它不是用于“外部(通常是非超文本标记语言)应用程序或交互式内容”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|476110|<embed+src="http://www.somesite.com"+width=200+height=200+/>|code-block|syntax|javascript|476111|更多信息：http://www.w3.org/wiki/HTML/Elements/embed+http://www.w3schools.com/tags/tag_embed.asp|offset|length|476112|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/wiki/HTML/Elements/embed|1|http://www.w3schools.com/tags/tag_embed.asp^0|0|0|5|16|0|1C|17|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]|$I|10|J|11|1|12]]|A|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

<p>This also does seem to work, although W3C specifies it is not intended "for an external (typically non-HTML) application or interactive content"</p>

<pre><code>&lt;embed src="http://www.somesite.com" width=200 height=200 /&gt;
</code></pre>

<p>More info:
<a href="http://www.w3.org/wiki/HTML/Elements/embed" rel="noreferrer">http://www.w3.org/wiki/HTML/Elements/embed</a>
<a href="http://www.w3schools.com/tags/tag_embed.asp" rel="noreferrer">http://www.w3schools.com/tags/tag_embed.asp</a></p>


blocks|key|692316|text|iframe仍然是下载跨域可视内容的最佳方式。使用AJAX，您当然可以从网页下载HTML并将其放在div中(正如其他人所提到的)，但是更大的问题是安全性。使用iframe，您可以加载跨域内容，但不能对其进行操作，因为内容实际上并不属于您。另一方面，使用AJAX，您当然可以操作您能够下载的任何内容，但是另一个域的服务器需要以这样一种方式进行设置，以便您一开始就可以下载它。很多时候，你不能访问其他域的配置，即使你访问了，除非你一直在做这种配置，否则这可能是一个令人头疼的问题。在这种情况下，iframe可能是更容易的替代方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692317|正如其他人所提到的，您还可以使用embed标记和object标记，但这并不一定比iframe更高级或更新。|692318|HTML5在采用web从跨域获取信息的方向上走得更远。通常，web只返回数据，而不返回HTML。|692319|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>An iframe is still the best way to download cross-domain visual content. With AJAX you can certainly download the HTML from a web page and stick it in a div (as others have mentioned) however the bigger problem is security. With iframes you'll be able to load the cross domain content but won't be able to manipulate it since the content doesn't actually belong to you. On the other hand with AJAX you can certainly manipulate any content you are able to download but the other domain's server needs to be setup in such a way that will allow you to download it to begin with. A lot of times you won't have access to the other domain's configuration and even if you do, unless you do that kind of configuration all the time, it can be a headache. In which case the iframe can be the MUCH easier alternative. </p>

<p>As others have mentioned you can also use the embed tag and the object tag but that's not necessarily more advanced or newer than the iframe. </p>

<p>HTML5 has gone more in the direction of adopting web APIs to get information from cross domains. Usually web APIs just return data though and not HTML. </p>


blocks|key|692407|text|我创建了一个节点模块来解决这个问题node-iframe-replacement。您提供了父站点的源URL和CSS选择器以将您的内容注入其中，它会将两者合并在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|692408|对父站点的更改每5分钟获取一次。|692409|var+iframeReplacement+=+require('node-iframe-replacement');

//+add+iframe+replacement+to+express+as+middleware+(adds+res.merge+method)+
app.use(iframeReplacement);

//+create+a+regular+express+route+
app.get('/',+function(req,+res){

++++//+respond+to+this+request+with+our+fake-news+content+embedded+within+the+BBC+News+home+page+
++++res.merge('fake-news',+{
++++++++//+external+url+to+fetch+
+++++++sourceUrl:+'http://www.bbc.co.uk/news',
+++++++//+css+selector+to+inject+our+content+into+
+++++++sourcePlaceholder:+'div[data-entityid="container-top-stories#1"]',
+++++++//+pass+a+function+here+to+intercept+the+source+html+prior+to+merging+
+++++++transform:+null
++++});
});|code-block|syntax|javascript|692410|源代码包含一个向BBC+News主页注入内容的working+example。|692411|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/node-iframe-replacement|1|https://www.npmjs.com/package/node-iframe-replacement#example-output|2|https://github.com/john-doherty/node-iframe-replacement/blob/master/example/server.js^0|H|N|0|0|0|0|8|8|1|N|F|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]|$A|18|B|19|1|1A]]|C|$]]|$1|M|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|X]]]]

<p>I created a node module to solve this problem <a href="https://www.npmjs.com/package/node-iframe-replacement" rel="nofollow noreferrer">node-iframe-replacement</a>. You provide the source URL of the parent site and CSS selector to inject your content into and it merges the two together.</p>

<p>Changes to the parent site are picked up every 5 minutes.</p>

<pre><code>var iframeReplacement = require('node-iframe-replacement');

// add iframe replacement to express as middleware (adds res.merge method) 
app.use(iframeReplacement);

// create a regular express route 
app.get('/', function(req, res){

    // respond to this request with our fake-news content embedded within the BBC News home page 
    res.merge('fake-news', {
        // external url to fetch 
       sourceUrl: 'http://www.bbc.co.uk/news',
       // css selector to inject our content into 
       sourcePlaceholder: 'div[data-entityid="container-top-stories#1"]',
       // pass a function here to intercept the source html prior to merging 
       transform: null
    });
});
</code></pre>

<p>The source contains a <a href="https://github.com/john-doherty/node-iframe-replacement/blob/master/example/server.js" rel="nofollow noreferrer">working example</a> of injecting content into the <a href="https://www.npmjs.com/package/node-iframe-replacement#example-output" rel="nofollow noreferrer">BBC News</a> home page.</p>


blocks|key|692109|text|您可以使用XMLHttpRequest将页面加载到div+(或页面的任何其他元素)中。一个示例函数是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692110|function+loadPage(){
if+(window.XMLHttpRequest){
++++//+code+for+IE7%2B,+Firefox,+Chrome,+Opera,+Safari
++++xmlhttp=new+XMLHttpRequest();
}else{
++++//+code+for+IE6,+IE5
++++xmlhttp=new+ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
++++if+(xmlhttp.readyState==4+&&+xmlhttp.status==200){
++++++++document.getElementById("ID+OF+ELEMENT+YOU+WANT+TO+LOAD+PAGE+IN").innerHTML=xmlhttp.responseText;
++++}
}

xmlhttp.open("POST","WEBPAGE+YOU+WANT+TO+LOAD",true);
xmlhttp.send();
}|code-block|syntax|javascript|692111|如果您的服务器有能力，您也可以使用PHP来完成此操作，但由于您请求的是一个HTML5方法，这应该就是您所需要的全部。|692112|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can use an XMLHttpRequest to load a page into a div (or any other element of your page really). An exemple function would be:</p>

<pre><code>function loadPage(){
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){
        document.getElementById("ID OF ELEMENT YOU WANT TO LOAD PAGE IN").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("POST","WEBPAGE YOU WANT TO LOAD",true);
xmlhttp.send();
}
</code></pre>

<p>If your sever is capable, you could also use PHP to do this, but since you're asking for an HTML5 method, this should be all you need.</p>


blocks|key|476461|text|在您自己的站点页面中加载其他站点的页面的关键问题是安全性。定义了跨站点安全策略，如果另一个站点将其设置为严格的同源策略，您将没有机会将其直接加载到您的iframe中。因此，为了找到iframe的替代品，他们必须能够绕过这个安全策略限制，即使在未来，如果WSC引入了任何新组件，它也会有类似的安全限制。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|476462|目前，绕过这种情况的最好方法是在逻辑中模拟正常的页面访问，这意味着AJAX+%2B服务器端访问可能是一个很好的选择。您可以在服务器端设置一些代理，并获取页面内容并将其加载到iframe中。这是有效的，但并不完美，因为内容中有任何链接或图像，它们可能无法访问。|476463|通常，如果您尝试在您自己的iframe中加载页面，则需要检查页面是否可以在iframe中加载。这篇post给出了一些关于如何进行检查的指南。|offset|length|476464|entityMap|0|LINK|mutability|MUTABLE|url|https://www.pixelstech.net/article/1532747442-How-t...e-can-be-loaded-in-iframe^0|0|0|1D|4|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>The key issue to load another site's page in your own site's page is security. There is cross-site security policy defined, you would have no chance to load it directly in your iframe if another site has it set to strict same origin policy. Hence to find an alternative to iframe, they must be able to bypass this security policy restriction, even in the future, if any new component is introduced by WSC, it would have similar security restrictions.</p>
<p>For now, the best way to bypass this is to simulate a normal page access in your logic, this means AJAX + server side access maybe a good option. You can set up some proxy at your server side and fetch the page content and load it into the iframe. This works but not perfect as if there is any link or image in the content and they may not be accessible.</p>
<p>Normally if you try to load a page in your own iframe, you would need to check whether the page can be loaded in iframe or not. This <a href="https://www.pixelstech.net/article/1532747442-How-t...e-can-be-loaded-in-iframe" rel="nofollow noreferrer">post</a> gives some guidelines on how to do the check.</p>


blocks|key|476354|text|你应该看看JSON-P+-当我遇到这个问题时，这对我来说是一个完美的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|476355|https://en.wikipedia.org/wiki/JSONP|offset|length|476356|您只需定义一个加载所有数据的javascript文件和另一个处理和显示数据的javascript文件。去掉了iframe中丑陋的滚动条。|476357|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

<p>You should have a look into JSON-P - that was a perfect solution for me when I had that problem:</p>

<p><a href="https://en.wikipedia.org/wiki/JSONP" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/JSONP</a></p>

<p>You basically define a javascript file that loads all your data and another javascript file that processes and displays it. That gets rid of the ugly scrollbar of iframes.</p>


<p>I would like to know if there is an alternative to iFrames with HTML5.
I mean by that, be able to inject cross-domains HTML inside of a webpage without using an iFrame.</p>


Alternative to iFrames with HTML5

服务器

HTML5

JSON

我想知道有没有用HTML5替代iFrames的方法。我的意思是，可以在不使用iFrame的情况下在网页中注入跨域的超文本标记语言。

问使用HTML5替代iFrames
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML5替代iFramesEN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML5替代iFrames
EN