我想知道是否有HTML5的iFrames替代方案。 我的意思是,能够在一个网页中注入跨域HTML,而不使用iFrame。
当前回答
在自己网站的页面中加载另一个网站的页面的关键问题是安全性。这里定义了跨站点安全策略,如果另一个站点将其设置为严格的同源策略,则您将没有机会直接在iframe中加载它。因此,为了找到iframe的替代方案,它们必须能够绕过这个安全策略限制,即使在将来,如果WSC引入任何新组件,它也会有类似的安全限制。
目前,绕过这个问题的最好方法是在逻辑中模拟正常的页面访问,这意味着AJAX +服务器端访问可能是一个不错的选择。您可以在服务器端设置一些代理,获取页面内容并将其加载到iframe中。这是可行的,但不是完美的,因为如果在内容中有任何链接或图像,他们可能无法访问。
通常,如果您尝试在自己的iframe中加载一个页面,则需要检查该页面是否可以在iframe中加载。这篇文章给出了一些如何检查的指导方针。
其他回答
我创建了一个节点模块来解决这个问题node-iframe-replacement。您提供父站点的源URL和CSS选择器注入您的内容,它将两者合并在一起。
对父站点的更改每5分钟被检测一次。
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
});
});
该源代码包含一个向BBC新闻主页注入内容的工作示例。
这似乎也可以工作,尽管W3C指定它不是“用于外部(通常是非html)应用程序或交互式内容”。
<embed src="http://www.somesite.com" width=200 height=200 />
更多信息: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp
可以使用XMLHttpRequest将页面加载到div(或页面的任何其他元素)中。一个例子函数是:
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 && 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();
}
如果您的服务器是有能力的,您也可以使用PHP来完成此工作,但由于您要求的是HTML5方法,因此这应该是您所需要的全部。
如果你想这样做,并控制从基本页面或内容被服务的服务器,你可以使用跨源资源共享(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是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内容的支持,运行代码片段不显示任何内容。但对于您的网站,它将完美地工作。
推荐文章
- CSS/HTML:什么是使文本斜体的正确方法?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- CSS div元素-如何显示水平滚动条只?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- 复选框输入是否只在被选中时才发布数据?
- 是类型="文本/css"必须在<链接>标签?
- 如何将LaTeX与Markdown混合?
- 如何使<div>总是全屏?
- 如何中心div垂直内绝对定位的父div
- 创建一个可变长度的字符串,用重复字符填充
- 有效使用< >(锚标签)没有href属性?
- 如何将全局字体应用到整个HTML文档