Selenium进阶一:技术基础Iframe+javaScript

在深入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>

二 javaScript操作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>