- 使用<iframe>:這種方式大概是最常被使用到的。
Sample:
<iframe NAME="outer_frame" width="100%" height="100%" frameborder="0" src="http://www.w3schools.com/" ></iframe>
Note:iframe的width或height設定成100%時,並不會依iframe網頁內容而造成無捲軸的現象。
若要透過javascript去依iframe的內容調整iframe的width或height,也只有同iframe所嵌頁面與外部網頁同domain的情況下可行
,不同domain會因access deny(存取被拒)而無法完成此修改width或height的動作。 - 使用<object>:不常見,且使用者端的瀏覽器需要在安全性設定上將[使用指令碼片段](scriptlet)設定為[啟用]。
Sample:
<object width=100% height="100%" border="0" type="text/x-scriptlet" data="http://www.w3schools.com/"></object>
- 透過Javascript使用XMLHTTP:在各個AJAX的教學網站中,都會提到使用Microsoft.XMLHTTP或XMLHttpRequest物件去讀取其他網頁的資源。
不過一樣會受限於瀏覽器的存取權限,只能讀取同domain的網路資源。
Sample:
function displayResult(strUrl, displayOid) { try { //取得顯示資料的object var oDisplay = document.getElementById(displayOid); var xmlhttp = null; if (window.ActiveXObject) { // IE try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } else if (window.XMLHttpRequest) { // Mozilla xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { try { //設定MimeType(如果讀取有問題,加這一段或許可解決) xmlhttp.overrideMimeType('text/xml'); } catch (e) {} } } if (xmlhttp != null && oDisplay != null) { //設定讀取資料的事件處理函式 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) {// 4 = "complete" if (xmlhttp.status == 200) {// 200 = "HTTP 200 OK" //將讀取到的字串設定至目的物件的innerHTML oDisplay.innerHTML = xmlhttp.responseText; } } }; //第三個參數是設定是否要非同步(true:要,false:不要) xmlhttp.open("GET", strUrl, true); xmlhttp.send(null); //如果要用POST,參考以下附註的做法 //var params = "id=1&subid=2"; //xmlhttp.open("POST", strUrl, true); //xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //xmlhttp.setRequestHeader("Content-length", params.length); //xmlhttp.setRequestHeader("Connection", "close"); //xmlhttp.send(params); } else { alert("你的瀏覽器不支源XMLHTTP"); } } catch (e) { alert("錯誤:" + e.description); } } - 寫一個泛型處理常式(ashx)來讀取遠端的檔案:
其實一開始是想讓B網站的網頁(html)透過Javascript的方式讀取A網站的特定網頁
,不過一直卡在存取權限上只好換這樣的做法。- 在A網站中新增一個泛型處理常式(ex:ReadRemoteUrl.ashx)。
- 在ashx裡將context.Response.ContentType設定為"text/javascript",程式碼如下:
public class ReadRemoteUrl : IHttpHandler { public void ProcessRequest(HttpContext context) { //先將資料清空 context.Response.Clear(); context.Response.ClearHeaders(); context.Response.ClearContent(); //設定為Javascript context.Response.ContentType = "text/javascript"; try { //判斷是否有指定的url要讀取 if (!string.IsNullOrEmpty(context.Request["url"])) { //透過WebClient讀取資料,如果是讀xml,可以透過XmlDocument的Load() string strWebContent = string.Empty; using (System.Net.WebClient oClient = new System.Net.WebClient()) { strWebContent = oClient.DownloadString(context.Request["url"]); } //"取代為\", '取代為\', NewLine取代為空字串 string strContent = System.Text.RegularExpressions.Regex.Replace( strWebContent, "[\"'](\\r\\n)", delegate(System.Text.RegularExpressions.Match m) { switch (m.Value) { case "\"": return "\\\""; case "'": return "\\'"; default: return string.Empty; } }); //設定輸出內容的Encoding(預設UTF8) context.Response.ContentEncoding = System.Text.Encoding.UTF8; //判斷是否有指定的Encoding(這邊只分big5和utf8) if (!string.IsNullOrEmpty(context.Request["enc"])) { if (context.Request["enc"].Equals("big5", StringComparison.OrdinalIgnoreCase)) { context.Response.ContentEncoding = System.Text.Encoding.GetEncoding(950); } } //利用Javascript的document.write()將網頁資料輸出 context.Response.Write("document.write(\"" + strContent + "\");"); } } catch (Exception e) { context.Response.Clear(); } } public bool IsReusable { get { return false; } } } - 在B網站的網頁中可以使用<script>的方式進行呼叫,例如:(讀取http://www.w3schools.com/xsl/cdcatalog.xml)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>這是測試</title> </head> <body> <div id="divResult"> <script type="text/javascript" src="http://192.168.1.3/MyTest/ReadRemoteUrl.ashx?url=http://www.w3schools.com/xsl/cdcatalog.xml"></script> </div> </body> </html>
所以最好在ashx裡多加一些判斷,例如只有某幾個介接網站可使用,或是只能讀取特定的一些資源。
文章標籤
全站熱搜
