我想知道是否有HTML5的iFrames替代方案。 我的意思是,能够在一个网页中注入跨域HTML,而不使用iFrame。
当前回答
object是HTML5中一个简单的替代方案:
<对象数据= " https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/ " 宽度= " 400 " 身高= " 300 " type = " text / html " > 替换内容 < /对象>
你也可以尝试embed:
<嵌入src = " https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/ " 宽度= 200 身高= 200 onerror="alert('URL无效!!');"/>
Re-
目前,StackOverflow已经关闭了对显示外部URL内容的支持,运行代码片段不显示任何内容。但对于您的网站,它将完美地工作。
其他回答
如果你想这样做,并控制从基本页面或内容被服务的服务器,你可以使用跨源资源共享(http://www.w3.org/TR/access-control/)允许客户端JavaScript通过XMLHttpRequest()将数据加载到<div>:
// 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();
现在,对于整个操作的关键,您需要为服务器编写代码,为客户端提供access - control - allow - origin标头,指定您希望客户端代码能够通过XMLHttpRequest()访问哪些域。下面是一个PHP代码的例子,你可以在你的页面顶部包含,以便将这些头发送给客户端:
<?php
header('Access-Control-Allow-Origin: http://api.google.com');
header('Access-Control-Allow-Origin: http://some.example.com');
?>
你可以使用object和embed,像这样:
<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>
这并不新鲜,但仍然有效。但我不确定它是否具有相同的功能。
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.
正如其他人提到的,你也可以使用embed标签和object标签,但这并不一定比iframe更高级或更新。
HTML5更倾向于采用web api从跨域获取信息。通常web api只返回数据而不是HTML。
在自己网站的页面中加载另一个网站的页面的关键问题是安全性。这里定义了跨站点安全策略,如果另一个站点将其设置为严格的同源策略,则您将没有机会直接在iframe中加载它。因此,为了找到iframe的替代方案,它们必须能够绕过这个安全策略限制,即使在将来,如果WSC引入任何新组件,它也会有类似的安全限制。
目前,绕过这个问题的最好方法是在逻辑中模拟正常的页面访问,这意味着AJAX +服务器端访问可能是一个不错的选择。您可以在服务器端设置一些代理,获取页面内容并将其加载到iframe中。这是可行的,但不是完美的,因为如果在内容中有任何链接或图像,他们可能无法访问。
通常,如果您尝试在自己的iframe中加载一个页面,则需要检查该页面是否可以在iframe中加载。这篇文章给出了一些如何检查的指导方针。
你应该看看JSON-P -当我有这个问题时,这是一个完美的解决方案:
https://en.wikipedia.org/wiki/JSONP
您基本上定义了一个javascript文件来加载所有数据,另一个javascript文件处理并显示数据。这样就摆脱了iframes丑陋的滚动条。
推荐文章
- 禁用表单自动提交按钮单击
- 链接重新加载当前页面
- 我如何使一个HTML文本框显示空时提示?
- 如何使HTML文本不可选
- 没有定义Electron require()
- JavaScript表单提交-确认或取消提交对话框
- HTML5中的画布宽度和高度
- Ng-app和data-ng-app有什么区别?
- 内容=“X-UA-Compatible IE = 9;IE = 8;IE = 7;IE =边缘”
- 停止/关闭由navigator.mediaDevices.getUserMedia打开的网络摄像头流
- 我如何禁用使用CSS的表单字段?
- 我真的需要将“&”编码为“&”吗?
- 使页脚正确地粘在页底
- iFrame src变化事件检测?
- 为什么<fieldset>不能是伸缩容器?