jQuery跨frameset的frame(或iframe)的頁面，取得元素進行操作

jQuery 要取得 frame 或 iframe 頁面裡的元素，
可先取得該 frame 或 iframe 的 document 物件，再配合選擇器，即可進行選取操作。

以下示範取得 frame 或 iframe 裡面的按鈕，並將按鈕隱藏。
例如有一個頁框 frameset 如下

<frameset cols="250,*">
  <frame name="leftFrame" id="leftFrame" src="left.html" >
  <frame name="mainFrame" id="mainFrame" src="main.html" >
</frameset>

main.html
主要內容如下(有一個按鈕)。

<input type="button" name="button" id="button" value="按鈕" />

left.html
主要內容如下，
裡面有一個 test 按鈕和 iframe(myiframe)，
按 test 按鈕後，會隱藏 mainFrame 和 myiframe 頁面的按鈕)。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function aa(){
    /*** 以下將父框架(frameset)的第2個frame頁面的按鈕隱藏 ***/
    var d1 = window.parent.frames[1].document; //先取得該frame的document物件。
    //亦可改成 var d1 = parent.frames['mainFrame'].document;
    $("#button",d1).hide();//即可用document物件配合jQuery的選擇器進行操作

   

    /*** 以下將本頁iframe頁面的按鈕隱藏 ***/
    var d2 = window.frames[0].document;
    //亦可改成 var d2 = $('#myiframe').contents();
    $("#button",d2).hide();
}
</script>

<input type="button" name="btn" id="btn" value="test" onclick="aa()" />

<iframe id="myiframe" name="myiframe" src="main.html" width="200" height="200"></iframe>

 備註：

• 亦可先用 getElementById 取得 frame 頁面的物件，再傳給 jQuery 進行操作。
  例如

  var d1 = window.parent.frames[1].document.getElementById('button');
  $(d1).hide();