用Ajax嵌入外部網頁

一般在以iFrame內嵌網頁時,會需要限制被內嵌網頁的大小,否則若內嵌網頁過大的話,iFrame預設會自動產生捲軸,在使用上相當不方便。

最近在實作ajax技術,發現其實可以用XMLHttpRequest取代iFrame內嵌網頁。它的原理如下:有兩個網頁:原始網頁和外部網頁,要在原始網頁內嵌外部網頁,原始網頁可以用XMLHttpRequest讀取外部網頁,然後將外部網頁用document.writeln寫入原始網頁。如此用戶在瀏覽器操作時,會感覺只有瀏覽原始網頁,因為原始網頁和外部網頁已經變成同一個html page。

程式碼如下:
這是javascript function的部份

function include(url){
  var xmlHttp = false;

  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
  }
  xmlHttp.Open( "GET", url, false );
  xmlHttp.Send()
document.writeln(xmlHttp.responseText); }

這段是呼叫javascript function

include("http://example.com/");

不過這個技術,目前已知有兩個問題
1. 相容性: 大略測了一下,只有IE能正常顯示,firefox和chrome都讀不到外部網頁(顯示空白),可能是XMLHttpRequest的關係,也許可以試試其他的object,例如ActiveX(Microsoft.XMLHTTP或Msxml2.XMLHTTP)。
2. 安全性: 如果原始網頁是https而外部網頁是http(反之亦然),在IE7以上會認為有安全性的問題,而將此網頁辨識為http。另外,外部網頁如果在IIS的話,AD認證不能開啟。

相關文章

如何將電腦畫面經由 Chromecast 投放到電視螢幕上

Chrome 的檔案續傳功能

隱私權政策產生器 Privacy Policy Generator

使用 Vysor 在電腦上控制 Android 裝置