改變 IFRAME 的網頁

此練習改變 IFRAME 元素內的網頁。這樣可以保持主視窗不變，而 IFRAME 的內容可以視需要 放置不同的網頁。此練習使用到以下元素與方法。

1. IFRAME：設定矩框的網頁與大小等等。
2. getElementById()：取得矩框的元素物件。
3. frames[]：取得矩框的視窗物件。

getElementById() 與 frames[] 都可以取得矩框的物件，但是一個是元素物件，一個是視窗物件。元素物件必須加上 contentWindow 特徵，才能取得矩框的視窗物件。 <script type='text/javascript'> function chgFrame( url ) { //var o=document.getElementById('myfrm'); //o.src=url; //o.contentWindow.location.href=url; frames[0].location.href=url; } document.write( Date() ); </script> <p><a href='javascript:chgFrame("http://www.blogger.com/")'>點此改變 IFRAME 內容</a> <p> <iframe width='90%' height='300px' id='myfrm' src='http://ant4js.blogspot.com/2008/12/array.html'></iframe>

• 程式用法：

  <script type='text/javascript'>
  function chgFrame( url )
  {
    //var o=document.getElementById('myfrm');
    //o.src=url;
    //o.contentWindow.location.href=url;
    frames[0].location.href=url;
  }
  document.write( Date() );
  </script>
  <p><a href='javascript:chgFrame("http://www.blogger.com/")'>點此改變 IFRAME 內容</a>
  <p>
  <iframe width='90%' height='300px' id='myfrm'
    src='http://ant4js.blogspot.com/2008/12/array.html'></iframe>
  

• 執行結果：

  Tue Apr 01 2025 17:31:17 GMT+0000 (Coordinated Universal Time)

  點此改變 IFRAME 內容

• 上例中列出的幾個方法都測試過，可以用。
• 測試時發現，改變 IFRAME 的網頁，會在瀏覽器的歷史紀錄增加新的一頁。在 Safari, Chrome 使用 o.src=url 改變網頁，則不會產生歷史新頁。