如图所示目的是在一个页面中实时更新显示多个网址的内容。但是由于加载网址会下载很多文件,iframe标签无法(不知道怎样)清理垃圾,很快浏览器就资源耗尽崩溃。
请问如何不使用iframe来实现呢?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
</head>
<body>
<div id='iframe1' style="border:1px solid red;width:300px;height:300px" >
</div>
<div id='iframe2' style="border:1px solid red;width:300px;height:300px" >
</div>
<div id='iframe3' style="border:1px solid red;width:300px;height:300px" >
</div>
<div id='iframe4' style="border:1px solid red;width:300px;height:300px" >
</div>
</body>
<script type="text/javascript">
var interval;
clearInterval(interval)
interval = setInterval(function(){
$('#iframe1').load('https://www.baidu.com');
$('#iframe2').load('https://www.sohu.com');
$('#iframe3').load('https://segmentfault.com');
$('#iframe4').load('https://www.zhihu.com');
},5000);
</script>
</html>
显示错误:
Failed to load https://www.sohu.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
demoIE.html:1 Failed to load https://www.baidu.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
jquery.load(),服务端去远程取数据然后解析。跨域暂时只能这样