-
Notifications
You must be signed in to change notification settings - Fork 74
/
Copy pathiframe.html
139 lines (123 loc) · 6.11 KB
/
iframe.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
iframe用法
</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
.modal_wrap{ width:100%; height:100%; position: absolute; top:0px; left:0px; display: none; }
.modal_wrap .mod_bg{ background-color:#000; opacity:0.7; filter:alpha(opacity=50); position: absolute; width:100%; height:100%; }
.modal_wrap .modal_cont{ position: absolute; z-index: 1; width:500px; height:200px; top:200px; left:200px; background-color:#fff; }
.modal_wrap .close_btn{ position: absolute; top: 20px; color: #fff; right: 20px; font-size: 24px; z-index: 1; cursor: pointer; }
.modal_wrap .close_btn:hover{ color:red; }
.modal_wrap .modal_iframe{ position: relative; width:100%; height:100%; }
.demo_select{ width:200px; }
.show_modal{ margin:0 10px 0 0; }
</style>
</head>
<body>
<h3>iframe自适应高度（跨域通信）:演示需放置tomcat中</h3>
<!-- <iframe src="http://wteamxq.com/photoDemo/" frameborder="0" scrolling="no" width="100%" height="460" id="testIframe"></iframe> -->
<H3>IE6 select 遮住bug:</H3>
<select class="demo_select">
<option value="se1">se1</option>
<option value="se2">se2</option>
<option value="se3">se3</option>
<option value="se4">se4</option>
</select>
<button class="show_modal" id="show_modal">显示弹层</button>
<div class="modal_wrap" id="modal_wrap">
<div class="modal_cont">弹层内容</div>
<div class="mod_bg"></div>
<div class="modal_iframe" id="modDivIframe"></div>
<div class="close_btn" id="close_btn" title="关闭弹层">x</div>
</div>
<script>
// 待更新， iframe其他实战用法：
// 问题源：https://www.zhihu.com/question/20653055/answer/15751248
// http://div.io/topic/855
var iframeObj = {
init: function() {
this.ie6Select();
},
initEvt: function(){
},
// 1.跨域通信
crossDomain: function(){
// 跨域通信原理：1.通过在iframe.src后添加“#” + 本页面url,让iframe框架页能访问本页面url；
// 2.子页面（iframe页）内修改window.top.location（“#”+“height=xxx”），使父页面（本页）url改变而不刷新；
// 3.本页面通过window.location.hash获取"#"后iframe传递的参数；
var iframe = document.getElementById('testIframe');
var href = window.location.href, index = href.indexOf("#"), time_id = 0;
if (index !== -1) {
href = href.slice(0, index);
}
iframe.src = iframe.src + "#" + href;
// 轮询改变高度
var iframeHeight = function() {
var hash = window.location.hash.slice(1);
if (hash && /height=/.test(hash)) {
iframe.height = hash.replace("height=", "");
// 高度加载完，结束轮询
clearTimeout(time_id);
}
time_id = setTimeout(iframeHeight, 200);
};
iframeHeight();
// http://wteamxq.com/photoDemo/ 域名已失效， 可在本地虚拟服务器例如 tomcat上 新建两个不同端口的工程测试跨域；
// "http://wteamxq.com/photoDemo/" 中配合脚本：
// window.onload = function(){
// // 设置父类url
// var hostUrl = window.location.hash.slice(1);
// // 设置url失败时， 不改变父location
// if (hostUrl == ""){
// return false;
// }
// var self_h = window.innerHeight || document.body.clientHeight;
// hostUrl += "#height=" + self_h;
// window.top.location = hostUrl;
// }
},
// 2.websocket不可用时（低版本浏览器兼容），替代实现长连接和服务端“推”技术 http://www.cnblogs.com/lecaf/archive/2011/07/20/2111618.html
commetEvt: function(){
},
// 3.纯前端的utf8和gbk编码互转
gbkEachToUtf8: function(){
},
// 4.无刷新上传
upload: function(){
},
// 5.移动端从网页调起客户端应用
launchApp: function(){
},
// 6.创建全新的宿主环境
newScope: function(){
},
// 7.解决IE6 模态窗口无法遮住select bug
ie6Select: function(){
// IE6 将select标签当做窗口级别元素， 所以会有该bug；
// 解决方法：1.当浮动层div出现的时候，用JS将select隐藏，当浮动层div消失的时候select恢复出现。
// 2.用select同级别元素：iframe标签，<iframe frameborder="0"></iframe> 然后用实际的浮动层div和iframe放在一起。间接的使div遮住了select。
var targetDiv = document.getElementById('modDivIframe'),
closeBtn = document.getElementById('close_btn'),
showBtn = document.getElementById('show_modal');
showBtn.onclick = showModPop;
closeBtn.onclick = hideModPop;
targetDiv.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>';
}
};
iframeObj.init();
function showModPop(){
var modalWrap = document.getElementById("modal_wrap");
modalWrap.style.display = 'block';
}
function hideModPop(){
var modalWrap = document.getElementById("modal_wrap");
modalWrap.style.display = 'none';
}
</script>
</body>
</html>