JS 操作框架页

 

index 页面中的iframe 部分代码如下

<iframe id="TopFrame" src="includes/Head.jsp" mce_src="includes/Head.jsp"></iframe> <div id="main"> <div id="left"> <iframe id="LeftFrame" src="includes/left.jsp"></iframe> </div> <div id="right"> <iframe name="MainFrame" src="DBM/mainPage.jsp"> </iframe>

 

 

left.jsp 中有 onReady() JS 函数 ；

 

head.jsp 中有 <select name="tbName" id="tbName1" style="width:80px;"></select> 下拉列表；

 

mainPage.jsp 中有 <input name="cell" id="cell" type="text" style=""/> 输入框；

 

应用场景1：

要在 head 页面执行完毕后 调用left 中的 函数 则可以通过如下方式：

 

top.window.frames["LeftFrame"].onReady(); 即可；

 

要刷新left页面则可以通过

top.window.frames["LeftFrame"].location.reload();

 

上面的代码在 IE  中是可以正常运行的，但是在 火狐 或者谷歌浏览器中就无法正常运行

因为top.window.frames ["frameName"]中 的frameName 没有在ID 为 LeftFrame 的iframe中定义名字，所以火狐浏览器找不到 指定名称的iframe 因此无法正常运行。

要想在非IE的浏览器中也正常运行，只需要给iframe加个name 属性即可。

 

应用场景2：

执行left页面中的onReady 函数时，给head页面中的下拉列表指定值 则可通过如下方式：

 

top.window.frames["MainFrame"].document.getElementById("tbName1").value = "xxx"; 即可；

 

应用场景3：

 

要在执行 left页面中的onReady 函数后 将光标 聚焦在 mainPage 页面中的cell 处 则可以执行如下方法：

 

top.window.frames["MainFrame"].document.getElementById("cell").focus();