两个iframe的使用实例
1."rich" textarea editor.前段时间有个霓虹灯的小项目。后台用asp.net给硬件传接口（具体怎样就不清楚了），前台网页让做个可即时变色的textarea editor，把内容传给后台就行了。其实如果不要求即时变色的话，自定义个命名规则就行了。没办法只能上网搜。先试了document.selection，可惜只支持IE而且bug不少（比如不能隔行操作）。后来搜到了一些开源的editor，人家用纯js写的小框架，真是牛。
自己也用iframe写了个简单的，一般功能是没问题了：
程序目录结构
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->img
***.gif
js
common.js
iframe.html
test.html
test.html
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <style type="text/css">
7 img{cursor:pointer;}
8 .class1{
9 border:solid 1px;
10 width:600px;
11 height:400px;
12 }
13 </style>
14 <script type="text/javascript" src="js/common.js"></script>
15 <title>iframe editor</title>
16 </head>
17 <body >
18 <form id="form1">
19
20 <div style="width:600px">
21 <div align=right style="float:right;">
22 <img src="img/1.gif"title="Change Font!" />
23 <img src="img/2.gif"title="Add Image!" />
24
25 </div>
26 </div>
27
28 <iframe src="iframe.html" id="editor" class="class1"></iframe>
29
30 <div style="width:600px" align=right>
31 <input type="button" id="button1" value="Get Editor Value"/>
32 </div>
33
34 </form>
35 </body>
36 </html>
iframe.html
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 </head>
7 <body>Hello World! 啊啊</body>
8 </html>
common.js
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> 1 function $(tagid){
2 return document.getElementById(tagid);
3 }
4
5 function getDocValue(){
6 alert($("editor").contentWindow.document.body.innerHTML);
7 }
8
9 function init(){
10 var win = $("editor").contentWindow;
11 win.document.designMode= "on";
12 win.document.contentEditable = true;
13 win.focus();
14 }
15
16 function chgFont() {
17 var win=$("editor").contentWindow;
18 win.document.execCommand("ForeColor",false,"red");
19 win.document.execCommand("FontSize",false,"10");
20 win.focus();
21 }
22
23 function addIMG() {
24 var win=$("editor").contentWindow;
25 win.document.execCommand("InsertImage",false,"img/a.gif");
26 win.focus();
27 }
注：document.execCommand可以改变很多样式，详情请参照手册：）
2.Advertisement Board.在CSDN看到的项目投标的广告滚动条，用的是iframe window.scrollBy，挺有意思的。
自己把源码做了点改进，并加了个暂停滚动的功能：
test.html
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>iframe scroll</title>
7 <style type="text/css">
8 iframe{margin: 0pt; width: 180px; height: 32px;}
9 </style>
10 </head>
11 <body>
12 <form id="form1">
13 <h4>Exciting Advertisement Board</h4>
14 <iframe src="iframe.html" scrolling="no" frameborder="1"></iframe>
15
16 </form>
17 </body>
18 </html>
iframe.html
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <style type="text/css">
7 *{margin:0;padding:0;}
8 body {background:#F2F2FC;font:normal 12px verdana,sans-serif;}
9 ul{list-style-type:none;}
10 li{width:180px;}
11 a{color:#03C;text-decoration:none;}
12 a:hover{color:#F00;text-decoration:none;}
13 </style>
14 </head>
15 <body>
16 <ul id="scrollCon"onmouseout="resume()">
17 <li>Hello!</li>
18 <li><a href="aaa">I'm aaa.</a></li>
19
20 <li>Hi!</li>
21 <li><a href="bbb">I'm bbb.</a></li>
22
23 <li>How are you!</li>
24 <li><a href="ccc">I'm ccc.</a></li>
25 </ul>
26
27 <script language="javascript">
28 var con=document.getElementById("scrollCon");
29 var items=con.getElementsByTagName("li");
30 var item_count=items.length/2;
31 var line_height=items.offsetHeight;
32 var timer1,timer2;
33 var step=0,cstep=0;
34 var isPlayed=false;
35
36 function startScroll(){
37 timer1=setInterval("doScroll()",40);//数值越大，滚动越慢
38 }
39 function doScroll(){
40 window.scrollBy(0,2);//滚动幅度
41 step;
42 if(step>=line_height) {
43 clearInterval(timer1);
44 step=0;
45 cstep;
46 if(cstep>=item_count){
47 cstep=0;
48 window.scrollTo(0,0);
49 }
50 }
51 }
52 function start(){
53 if(isPlayed)return;
54 isPlayed=true;
55 timer2=setInterval("startScroll()",3000);//滚动间隔
56 }
57 function suspend(){
58 clearInterval(timer1);
59 clearInterval(timer2);
60 }
61 function resume(){
62 timer2=setInterval("startScroll()",3000);
63 }
64 function stop(){
65 isPlayed=false;
66 clearInterval(timer2);
67 }
68
69 start();
70 </script>
71 </body>
72 </html>
页:
[1]