在深入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>
下面我们继续以一段代码来讲述JS 如何操作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>