我想知道是否有HTML5的iFrames替代方案。 我的意思是,能够在一个网页中注入跨域HTML,而不使用iFrame。
当前回答
你可以使用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>
这并不新鲜,但仍然有效。但我不确定它是否具有相同的功能。
其他回答
你可以使用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>
这并不新鲜,但仍然有效。但我不确定它是否具有相同的功能。
我创建了一个节点模块来解决这个问题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新闻主页注入内容的工作示例。
不,没有等价物。<iframe>元素在HTML5中仍然有效。根据您需要的确切交互,可能会有不同的api。例如,postMessage方法允许你实现跨域javascript交互。但是如果你想要显示跨域的HTML内容(使用CSS样式并使用javascript进行交互),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内容的支持,运行代码片段不显示任何内容。但对于您的网站,它将完美地工作。
可以使用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方法,因此这应该是您所需要的全部。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击