總結: javascript
1. frameset、frame組合使用,頁面中不能有body。因此我不得不新建一個searchFrame.html文件存放search代碼。 css
2. iframe則不一樣,能夠放在body中。但不知怎地,除了Chrome,IE、FF均不能顯示正常效果(搜索結果不能返回到其相應的iframe中)。 html
BaiGooHu.html: java
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>BaiGooHu.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <!--<body style="text-align: center;"> --> <frameset rows="10%,90%"> <frame src="searchFrame.html"> </frame> <frameset cols="45%,45%"> <frame id="baiduFrame" name="baiduFrame" src="images/1.jpg"></frame> <frame id="bingFrame" name="bingFrame" src="images/1.jpg"></frame> </frameset> </frameset> <!--<iframe id="baiduFrame" width="49%" height="100%" ></iframe> <iframe id="bingFrame" width="49%" height="100%" ></iframe> </body>--> </html>
searchFrame.html: ui
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>searchFrame.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function mixSearch() { var okeyword = $("keyword"); var oForm = $("searchForm"); //提交給百度,構造地址參數 oForm.action = "http://www.baidu.com/s"; okeyword.name = "wd"; oForm.method = "get"; oForm.target = "baiduFrame"; oForm.submit(); //提交給bing,構造地址參數 oForm.action = "http://hk.bing.com/search"; okeyword.name = "q"; oForm.method = "get"; oForm.target = "bingFrame"; oForm.submit(); } </script> </head> <body style="text-align: center;"> <form action="" id="searchForm" method="get" target="baiduFrame"> <input type="text" id="keyword" name="wd" /> <input type="button" value="搜一下~" onclick="mixSearch();" /> </form> <hr /> </body> </html>