我是靠谱客的博主 优美胡萝卜,这篇文章主要介绍iframe高度设置demo以及水印的简单添加,现在分享给大家,希望可以做个参考。

不是专业人士,只说自己的一些看法.
对于iframe 的高度设置,如果父和子都能操作,那么可以在父或子中执行.一般是通过iframe的id来获取对象进行设置:父页面:

复制代码
1
2
3
4
5
6
window.onload=function() { var doc = document.getElementById("ifDemo") var docWin = doc.contentWindow || iframe.contentDocument.parentWindow; //子内容对象 var height = docWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; //子内容高度 doc.height = height;

子页面:

复制代码
1
2
3
4
5
6
7
var obj = window.parent.document.getElementById("ifDemo"); var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); var height = Math.max(cHeight, sHeight); obj.height=height;

还有一种,是只能操作子页面,而且还不知道父页面中iframe的id或name,或class等信息,可以通过parent.frames;获取父页面中iframe数组信息,然后通过src来匹配

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var frames=parent.frames; var herf=window.location.href; var obj; for(var i=0;i<frames.length;i++){ if(herf==frames[i].frameElement.src){ obj=frames[i].frameElement; break; } } if(obj==undefined){ return; } var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); var height = Math.max(cHeight, sHeight); //alert(cHeight+","+sHeight+","+height) obj.height = height;

父页面

复制代码
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe高度问题</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script> /* * iframe子页面高度 * window.onload=function() { var doc = document.getElementById("ifDemo") var docWin = doc.contentWindow || iframe.contentDocument.parentWindow; //子内容对象 var height = docWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; //子内容高度 doc.height = height; }*/ ///水印 $(document).ready(function(e) {   var iframe = document.getElementById("ifDemo3"); if(iframe.attachEvent) { iframe.attachEvent("onload", function() { //iframe加载完成后你需要进行的操作 watermark(getNow()); }); } else { iframe.onload = function() { //iframe加载完成后你需要进行的操作 watermark(getNow()); }; } }) /** * 水印 * @param {Object} settings */ function watermark(settings) { //默认设置 var defaultSettings = { watermark_txt: settings, watermark_x: 20, //水印起始位置x轴坐标 watermark_y: 20, //水印起始位置Y轴坐标 watermark_rows: 0, //水印行数 watermark_cols: 0, //水印列数 watermark_x_space: 100, //水印x轴间隔 watermark_y_space: 50, //水印y轴间隔 watermark_color: '#aaa', //水印字体颜色 watermark_alpha: 0.4, //水印透明度 watermark_fontsize: '15px', //水印字体大小 watermark_font: '微软雅黑', //水印字体 watermark_width: 220, //水印宽度 watermark_height: 80, //水印长度 watermark_angle: 20 //水印倾斜度数 }; if(arguments.length === 1 && typeof arguments[0] === "object") { var src = arguments[0] || {}; for(key in src) { if(src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue; else if(src[key]) defaultSettings[key] = src[key]; } } var oTemp = document.createDocumentFragment(); //获取页面最大宽度 var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth); var cutWidth = page_width * 0.0150; var page_width = page_width - cutWidth; //获取页面最大高度 var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight); //+ 450; page_height = Math.max(page_height, window.innerHeight - 30); //如果将水印列数设置为0,或水印列数设置过大,超过页面最大宽度,则重新计算水印列数和水印x轴间隔 if(defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) { defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space)); defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1)); } //如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔 if(defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) { defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space)); defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1)); } var x; var y; for(var i = 0; i < defaultSettings.watermark_rows; i++) { y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i; for(var j = 0; j < defaultSettings.watermark_cols; j++) { x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_div = document.createElement('div'); mask_div.id = 'mask_div' + i + j; mask_div.className = 'mask_div'; mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt)); //设置水印div倾斜显示 mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.visibility = ""; mask_div.style.position = "absolute"; mask_div.style.left = x + 'px'; mask_div.style.top = y + 'px'; mask_div.style.overflow = "hidden"; mask_div.style.zIndex = "9999"; //让水印不遮挡页面的点击事件 mask_div.style.pointerEvents = 'none'; mask_div.style.opacity = defaultSettings.watermark_alpha; mask_div.style.fontSize = defaultSettings.watermark_fontsize; mask_div.style.fontFamily = defaultSettings.watermark_font; mask_div.style.color = defaultSettings.watermark_color; mask_div.style.textAlign = "center"; mask_div.style.width = defaultSettings.watermark_width + 'px'; mask_div.style.height = defaultSettings.watermark_height + 'px'; mask_div.style.display = "block"; oTemp.appendChild(mask_div); }; }; document.body.appendChild(oTemp); } function getNow() { var d = new Date(); var year = d.getFullYear(); var month = change(d.getMonth() + 1); var day = change(d.getDate()); var hour = change(d.getHours()); var minute = change(d.getMinutes()); var second = change(d.getSeconds()); function change(t) { if(t < 10) { return "0" + t; } else { return t; } } var time = year + '年' + month + '月' + day + '日 ' + hour + '时' + minute + '分' + second + '秒'; return time; } </script> </head> <body> <h1>父页面</h1> <div>白日依山尽</div> <div>黄河入海流</div> <div>如穷千里目</div> <div>快买摄像头</div> <div><iframe id="ifDemo" src="test02.html"></iframe></div> <h1>父页面</h1> <div>床前明月光</div> <div>疑是地上霜</div> <div>举头望明月</div> <div>低头在他乡</div> <div><iframe id="ifDemo2" src="test03.html"></iframe></div> <h1>父页面</h1> <div>独在异乡为异客</div> <div>每逢佳节倍思亲</div> <div>遥知兄弟登高处</div> <div>何日拆字幸我门</div> <div><iframe id="ifDemo3" src="test04.html"></iframe></div> </body> </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
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe高度问题</title> <script> window.onload = function() { var obj = window.parent.document.getElementById("ifDemo"); var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); var height = Math.max(cHeight, sHeight); //alert(cHeight+","+sHeight+","+height) obj.height=height; } </script> </head> <body> <h1>子页面</h1> <div>妹喜</div> <div>妲己</div> <div>褒姒</div> <div>夏姬</div> <div>孟姜女</div> <div>赵飞燕</div> <div>貂蝉</div> <div>大桥</div> <div>小乔</div> <div>绿珠</div> <div>谢道韫</div> <div>李祖娥</div> <div>杨玉环</div> <div>李师师</div> <div>陈圆圆</div> <div>香妃</div> </body> </html>``` 子页面二 ```handlebars <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe高度问题</title> <script> window.onload = function() { //知道父页面iframeid //var obj = window.parent.document.getElementById("ifDemo2"); //不知道父页面id和name var frames=parent.frames; var herf=window.location.href; var obj; for(var i=0;i<frames.length;i++){ if(herf==frames[i].frameElement.src){ obj=frames[i].frameElement; break; } } if(obj==undefined){ return; } var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); var height = Math.max(cHeight, sHeight); //alert(cHeight+","+sHeight+","+height) obj.height = height; } </script> </head> <body> <h1>子页面2</h1> <div>夏启</div> <div>商汤</div> <div>姬发</div> <div>嬴政</div> <div>刘邦</div> <div>刘秀</div> <div>曹丕</div> <div>刘备</div> <div>孙权</div> <div>司马炎</div> <div>司马睿</div> <div>刘裕</div> <div>萧道成</div> <div>萧衍</div> <div>陈霸先</div> <div>杨坚</div> <div>李渊</div> <div>朱温</div> <div>李存勖</div> <div>石敬瑭</div> <div>刘知远</div> <div>郭威</div> <div>赵匡胤</div> <div>完颜构</div> <div>忽必烈</div> <div>朱元璋</div> <div>努尔哈赤</div> </body> </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
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe高度问题</title> <script> window.onload = function() { var obj = window.parent.document.getElementById("ifDemo3"); var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); var height = Math.max(cHeight, sHeight); //alert(cHeight+","+sHeight+","+height) obj.height=height; } </script> </head> <body> <h1>子页面3</h1> <div>燧人氏</div> <div>有巢氏</div> <div>伏羲</div> <div>女娲</div> <div>神农</div> <div>皇帝</div> <div>蚩尤</div> <div>颛顼</div> <div>帝喾</div> <div>少昊</div> <div>唐尧</div> <div>虞舜</div> <div>夏禹</div> <div></div> <div></div> <div></div> <div>西汉</div> <div>东汉</div> <div></div> <div></div> <div></div> <div>西晋</div> <div>东晋</div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div>北宋</div> <div>契丹</div> <div>西夏</div> <div></div> <div>南宋</div> <div></div> <div></div> <div></div> </body> </html>

最后

以上就是优美胡萝卜最近收集整理的关于iframe高度设置demo以及水印的简单添加的全部内容,更多相关iframe高度设置demo以及水印内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(95)

评论列表共有 0 条评论

立即
投稿
返回
顶部