在深入selenium之前,我們需要對selenium的技術基礎有所瞭解.Seleium是基於iframe+javascript的框架.
一 Iframe 概念
Web designer在設計web page 的時候經常用到frameset,frame,他們的用途在於將頁面分爲幾個block,可用於局部刷新.
IFrame="inline frame",iframe 塊 可以作爲一個"內嵌的browser"插入web page.典型的iframe的源代碼如下.(可以拷貝下面的代碼,保存爲.html格式,打開查看iframe效果.)
<iframe id="Iframe1" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="1000" scrolling="yes" height="100" src="http://www.yahoo.com">
</iframe>
下面我們繼續以一段代碼來講述ＪＳ 如何操作Iframe.
<html>
<head>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script id="clientEventHandlersJS" language="javascript">
function ShowWebSite(val)
{
document.all.myFrame.src=val;
document.all.myFrame.style.visibility="visible";
}
function Button1_onclick() {
var v = document.all("txtWebSite").value;
ShowWebSite(v);
}
</script>
</head>
<body>
<iframe id="myFrame" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0"
width="100" scrolling="yes" height="100" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 999; LEFT: 20px; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 100px; visibility:hidden;">
</iframe>
<form id="form1">
Enter website:<input type="text" id="txtWebSite" NAME="txtWebSite" value="http://www.yahoo.com">
<input type="button" value="Show" id="Button1" name="Button1" οnclick="return Button1_onclick()">
</form>
</body>
</html>
頁面中建立一個hidden的IFRame,一個form帶有一個輸入框,一個button.點擊button調用Button1_onclick()方法,Button1_onclick()首先獲取輸入框txtWebSite的值,把這個值作爲iframe的src,然後設置iframe變爲可見(visible)
三 javascript寫內容到iframe中
上面的例子瞭解了,javascript如何操作iframe,下面再舉一個例子來描述js如何寫內容至iframe中,
<html>
<head>
<script id="clientEventHandlersJS" language="javascript">
function Show(val)
{
var testFrame = document.getElementById("myFrame");
var doc = testFrame.contentDocument;
if (doc == undefined || doc == null)
doc = testFrame.contentWindow.document;
doc.open();
doc.write(val);
doc.close();
document.all.myFrame.style.visibility="visible";
}
function ButtonShowMsg_onclick() {
var v = document.all("txtContent").value;
Show(v);
}
</script>
</head>
<body>
<iframe id="myFrame" frameborder="0" vspace="0" hspace="0" marginwidth="0"
marginheight="0" width="100" scrolling=yes height="100"
style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 999; LEFT: 20px; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 100px; visibility:hidden;"></iframe>
<form id="form1">
Enter content:<input type="text" id="txtContent" NAME="txtContent" value="This is going to be sample content in IFRAME"> <input type="button" value="Show" id="Button1" name="ButtonShowMsg" οnclick="return ButtonShowMsg_onclick()">
</form>
</body>
</html>
同理,Button1的方法 ButtonShowMsg_onclick()首先獲取用戶的輸入值(document.all("txtContent").value),然後打開iframe的contentDocument,然後寫入,並修改iframe的可見性.
四 另一種寫iframe的方法
<html>
<head>
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<script id="clientEventHandlersJS" language="javascript">
<!--
function Show()
{
// get our iframe
var testFrame = document.getElementById("myFrame");
var val;
val = "<TABLE border=1>";
val += "<TR><TD>SlNo</TD><TD>Name</TD></TR>";
val += "<TR><TD>1</TD><TD>Jag</TD></TR>";
val += "<TR><TD>2</TD><TD>Chat</TD></TR>";
val += "<TR><TD>3</TD><TD>Win</TD></TR>";
val += "<TR><TD>4</TD><TD>Dhan</TD></TR>";
val += "</TABLE>";
// now write out the new contents
var doc = testFrame.contentDocument;
if (doc == undefined || doc == null)
doc = testFrame.contentWindow.document;
doc.open();
doc.write(val);
doc.close();
document.all.myFrame.style.visibility="visible";
}
function Button1_onclick() {
Show();
}
//-->
</script>
</head>
<body>
<iframe id="myFrame" frameborder="0" vspace="0" hspace="0" marginwidth="0"
marginheight="0" width="100" scrolling=yes height="100"
style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 999; LEFT: 20px; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 100px; visibility:hidden;"></iframe>
<form id="form1">
<input type="button" value="Show" id="Button1" name="Button1" onclick="return Button1_onclick()">
</form>
</body>
</html>
