一个页面上面很多iframe会有什么影响?
发布网友
发布时间：2022-04-23 13:18
共4个回答
热心网友
时间：2022-04-19 07:10
1、用来实现长连接，在websocket不可用的时候作为一种替代，最开始由google发明。Comet：基于 HTTP 长连接的“服务器推”技术
2、跨域通信。JavaScript跨域总结与解决办法 ，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。
3、历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代。
4、纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换，这样就不用在页面上插入一个非常巨大的编码映射表文件了，其中子页面内容：
<!doctype html>
<html>
<head>
<meta charset="gbk">
<script>
window.encoding = function(str){
//利用a元素的href属性来encode
var a = document.createElement("a");
a.href = "/?q=" + str;
var url = a.href; //这里读取的时候会自动编码
a.href = "/?q=";
return url.replace(a.href, "");
};
</script>
</head>
</html>
把这个iframe部署到父页面的同源服务上，就能在父页面直接调用iframe中的encoding接口了。
5、评论里有提到，用iframe实现无刷新文件上传，在FormData不可用时作为替代方案
6、在移动端用于从网页调起客户端应用（此方法在iphone上并不安全，慎用！具体风险看这里 iOS URL Scheme 劫持 ）。比如想在网页中调起支付宝，我们可以创建一个iframe，src为：
alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二维码扫描的url}
浏览器接收到这个url请求发现未知协议，会交给系统处理，系统就能调起支付宝客户端了。我们还能趁机检查一下用户是否安装客户端：给iframe设置一个3-5秒的css3的transition过渡动画，然后监听动画完成事件，如果用户安装了客户端，那么系统会调起，并将浏览器转入后台运行，进入后台的浏览器一般不会再执行css动画，这样，我们就能通过判断css动画执行的时长是否超过预设来判断用户是否安装某个客户端了：
/**
* 调起客户端
* @param url {String}
* @param onSuccess {Function}
* @param onFail {Function}
*/
mole.exports = function(url, onSuccess, onFail){
// 记录起始时间
var last = Date.now();
// 创建一个iframe
var ifr = document.createElement('IFRAME');
ifr.src = url;
// 飘出屏幕外
ifr.style.position = 'absolute';
ifr.style.left = '-1000px';
ifr.style.top = '-1000px';
ifr.style.width = '1px';
ifr.style.height = '1px';
// 设置一个4秒的动画用于检查客户端是否被调起
ifr.style.webkitTransition = 'all 4s';
document.body.appendChild(ifr);
setTimeout(function(){
// 监听动画完成时间
ifr.addEventListener('webkitTransitionEnd', function(){
document.body.removeChild(ifr);
if(Date.now() - last < 6000){
// 如果动画执行时间在预设范围内，就认为没有调起客户端
if(typeof onFail === 'function'){
onFail();
}
} else if(typeof onSuccess === 'function') {
// 动画执行超过预设范围，认为调起成功
onSuccess();
}
}, false);
// 启动动画
ifr.style.left = '-10px';
}, 0);
};
热心网友
时间：2022-04-19 08:28
你的目的是不是就是想对每一个栏目进行操作而不用刷新整个页面吧？
2.30个iframe太夸张了
看看Ajax技术，它实现了服务器访问的异步，也就是说你操作某个栏目的时候后台ajax已经悄悄地把请求发给服务器了，过一段时间栏目就自动更新，这段时间你可以进行其它操作。
热心网友
时间：2022-04-19 10:02
可以，但是iframe的加载速度比较慢，会影响你整个页面的装载速度。
另外，你每个iframe都要写一个页面，你要多写20-30个页面，太累了吧。
热心网友
时间：2022-04-19 11:54
还不如用Ajax更新呢！
