2. 程式人生 > >嵌入頁面的幾種方法

嵌入頁面的幾種方法

阿新 • • 發佈：2019-01-05

一．應用框架技術 
---- 要在宿主頁面中嵌入外部頁面的方法是，在宿主頁面中包含外部頁面的位置插入“< IFRAME name="XXX" width=X height=X frameborder=0 src="XXX.htm" >< /IFRAME >”語句即可(注意: < IFRAME >標籤中的各種屬性含義請查閱相關技術手冊)。

---- 如果想在嵌入的外部頁面過長時不出現滾動條，在外部檔案< body >標籤中加入“scroll=no”或者在宿主頁面< IFRAME >標籤中加入“scrolling=no”即可。

---- 但這樣做會出現一個問題，就是宿主頁面和外部頁面背景色不同，這樣會給人造成頁面不是一個整體的感覺。這時，只要在引入的外部檔案中使用和宿主頁面相同的背景色就可以解決這一問題。注意，如果您使用的是IE 5.5或以上版本的話，直接在標籤< IFRAME >內設定屬性allowTransparency="true"(即框架背景透明)即可。

---- 在應用框架技術時，為什麼不使用框架頁面(即< FRAMESET >)呢？現在有很多網站是通過使用框架頁面來分割版面的，並達到了統一網站整體風格的目的，但筆者的體會是框架頁面的操作靈活性較差，不像內建框架(即< IFRAME >)這樣可以在宿主頁面中的任何位置插入。

二．使用Scriptlets元件技術

---- 應用這種技術的方法是在宿主頁面中包含外部頁面的位置插入“< OBJECT style="border: 0px" type="text/x-scriptlet" data="XXX.htm" width=X Height=X >< /OBJECT >”語句即可(注意: < OBJECT >標籤中的各種屬性含義請查閱相關技術手冊)。

---- 在IE 5.0及以後版本中，scriptlets和Html元件(HTCs)被重新命名為Windows指令碼程式設計元件(WSC)，其特點類似於上文所講的框架技術。它有自己的不透明方形區域，並覆蓋在宿主頁面上，因此不能很平滑地用於具有紋理背景的宿主頁面中，其工作方式類似於ActiveX控制元件，具有自己獨立的事件、方法和屬性。

三．使用指令碼檔案技術

---- 我們知道document.write方法可以在宿主頁面中輸出內容，這樣就可以通過在宿主頁面中引入外部指令碼檔案來達到嵌入外部頁面的目的。方法是在宿主頁面中包含外部頁面的位置插入“< SCRIPT language="

JavaScript" src="import.js" >< /SCRIPT >”，然後對外部頁面進行改造，將每一行內容寫入document.write中，並另外儲存在副檔名為js的新檔案中。

---- 這種方法的特點是外部頁面不具有自己的方形區域，和宿主頁面渾然一體，但由於外部頁面內容全部寫在指令碼中，無法做到所見即所得，必須等到指令碼執行時才能看到實際效果，這樣就為修改除錯增加了困難。

四．使用內建行為技術

---- 在IE 5.0及以後版本，引入了一項被稱為“DHTML行為”的新功能，並在其中內建了許多預設行為。當將一種行為應用於宿主頁面上的標準HTML元素時，它可以增強該元素的預設功能，並提供該行為中定義的任何新方法、屬性或事件。其實大家對行為技術並不陌生，微電腦世界2001年18期的《主頁加入收藏設定面面觀》一文就提到了利用IE中內建的homepage行為技術進行主頁設定的方法。我們同樣可以利用IE 5.0內建的download行為，來達到在宿主頁面中嵌入外部頁面的目的，其程式碼如下。

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. <span id="outHTML"></span>  
  2. <IE:Download ID="ieDownload" STYLE="behavior:url(#default#download)" />  
  3. <script>  
  4. function onDownloadDone(downDate){  
  5. outHTML.innerHTML=downDate  
  6. }  
  7. ieDownload.startDownload('../static/article.htm',onDownloadDone)  
  8. </script>  


---- 其原理就是使用download行為提供的startDownload方法下載一個外部文字檔案，並將檔案中的文字內容作為引數傳遞給onDownloadDone函式，然後再由該函式對文字內容進行處理，在本例中是作為showImport物件的內容顯示出來。如果在函式中對文字內容做相應的處理，並與相關技術結合，如XML，就可以實現更為複雜的功能。

---- 這種方法使得外部頁面不再具有自己的方形區域，和宿主頁面渾然一體; 提供了更大的靈活性，通過使用物件的innerHtml屬性可以真正做到在宿主頁面的任何位置插入外部檔案內容; 修改簡單，只須用可視網頁編輯軟體(如FrontPage 2000)將外部頁面修改即可輕鬆改變網站整體風格。可以說這是在宿主頁面中嵌入外部頁面的最好方法 (注: 以上程式碼在Windows 98 SE/IE 5.0中測試通過)。

網頁設計特效實用程式碼 2007-10-18 17:16 線上製作icon圖示
http://www.chami.com/html-kit/services/favicon/

進入主頁以後自動播放聲音 
<embed src="http://你的網站/music.rm" hidden=true autostart=true loop=true> 

進入主頁後自動最大話,省的去在自己單擊了
<script> 
self.moveTo(0,0) 
self.resizeTo(screen.availWidth,screen.availHeight) 
</script> 

顯示現在時間的指令碼
<script language=vbscript>document.write now</script> 

顯示最後修改時間的指令碼
<script>document.write(document.lastModified)</script> 

設為首頁,加為收藏，加入頻道,啟動outlook發信
<a style="cursor:hand"　
onclick="this.style.behavior="url(#default#homepage)"; 
this.setHomePage("yourURL">設為首頁</a> 

<a style="cursor:hand" 
onclick="window.external.AddFavorite(location.href,document.title);">加入收藏</a> 

<a href=javascript:window.external.addChannel("typhoon.cdf")>加入頻道</a> 

<a href="youEmail">與我聯絡</a>

Flash中在按鈕上如何加“設為首頁”“加入收藏”？action怎麼寫啊？

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. on (release) {  
  2. getURL("javascript:void(document.links[0].style.behavior='url(#default#homepage)');void document.links[0].setHomePage('84design.com/" target="_blank">http://www.84design.com/');", "_self");
  3. }  



加入收藏：
[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. on(release) {  
  2. getURL("javascript:window.external.AddFavorite('84design.com/" target="_blank">http://www.84design.com/','E佳工作室')");
  3. }  


狀態列動態顯示現在時間
[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. <script>  
  2. function see(){  
  3. window.setTimeout("see()",1000);  
  4. today = new Date();  
  5. self.status = today.toString();  
  6. }  
  7. </script>  
  8. <body onload=see()>   



關閉視窗的指令碼
[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. <a href=javascript:close()>[關閉視窗]</a>   



視窗定時關閉
先將如下程式碼網頁檔案的<head></head>區：
[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. <script language="JavaScript">  
  2. 　function closeit() { setTimeout("self.close()",10000) //毫秒 }
  3. 　</script>  


然後再在<body></body>標內加入如：<body onload="closeit()"> 

網頁自動關閉
 [html] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. <html>
  2. 　<head>
  3. 　<objectid=closestype="application/x-oleobject"
  4. 　classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
  5. 　<paramname="Command"value="Close">
  6. 　</object>
  7. 　</head>
  8. 　<bodyonload="window.setTimeout('closes.Click()',10000)">
  9. 　這個視窗會在10秒過後自動關閉,而且不會出現提示.  
  10. 　</body>
  11. 　</html>



按下F12鍵,直接返回首頁
[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. <script>function look(){  
  2. if(event.keyCode==123){document.location.href=http://www.wowo-design.com/}
  3. }  
  4. if(document.onkeydown==null)  
  5. {document.onkeydown=look}  
  6. </script>  



後退,重新整理,前進
 [html] view plain copy  

相關推薦

嵌入頁面的幾種方法

一．應用框架技術  ---- 要在宿主頁面中嵌入外部頁面的方法是，在宿主頁面中包含外部頁面的位置插入“< IFRAME name="XXX" width=X height=X frameborder=0 src="XXX.htm" >< /IFRA

JS跳轉頁面常用的幾種方法

class define bst top color defined rip dex text 第一種：(常用) <script language="javascript" type="text/javascript"> window.location.

在頁面中隱藏一個元素的幾種方法

osi play hid abs 隱藏 一個 bili cit eight 1.display:none，不占據空間，無法點擊； 2.visibility:hidden，占據空間，無法點擊； 3.height:0; overflow:hidden，不占據空間，無法點擊； 4

JS刷新當前頁面的幾種方法總結

onu navigate mman reload 存在 .exe time 通過 復制代碼 reload 方法，該方法強迫瀏覽器刷新當前頁面。語法：location.reload([bForceGet])

php抓取頁面的幾種方法詳解

close deb clas win exe _array error: fopen ini 一、 PHP抓取頁面的主要方法：1. file()函數 2. file_get_contents()函數 3. fopen()->fread()->fclose

如何在HTML不同的頁面中，共用頭部與尾部？HTML的引入幾種方法

asp語言和PHP語言 的使用  首先製作一個頭部檔案head.asp，或者一個底部檔案foot.asp。如主頁是index.asp，呼叫頭部程式碼是在index.asp檔案程式碼的開始位置（第一個標記後面，<head>標記前面）增加如下程式碼： &

JS頁面跳轉的幾種方法以及註解

來介紹一下我所用的JS跳轉頁面的方法 第一種：這是最常用的了 window.location.href <script language="javascript" type="text/javascript"> window.location.href="l

window.open()開啟頁面的幾種方法

[javascript]   view plain  copy 主要原理：讓瀏覽器以為是使用者主動點選的，因此可以利用onclick或者利用<a>標籤的_blank屬性開啟頁面&nbs

jsp下頁面跳轉的幾種方法小結

1. RequestDispatcher.forward() 　　在伺服器端起作用,當使用forward()時,Servlet engine傳遞HTTP請求從當前的Servlet或者是JSP到另外的一個Servlet、JSP 或普通HTML檔案,也即你的form提交至a.js

基礎面試題之 —— CSS實現簡單頁面佈局的幾種方法

頁面佈局是前端面試中CSS部分經常考到的問題，本文列舉幾種簡單頁面佈局的方法： 絕對定位 + margin float inline-block flex 附加：響應式佈局 其中幾種方法在CSS程式碼上有相似之處，也有侷限或是需要特殊注意的地方，下文具體指出。

正在載入中......loading頁面的幾種方法

　　網頁載入過程中提示“載入中…”，特別是使用動畫效果，可以一個“等待”的溫馨提示，使用者體驗很不錯。下面介紹幾種方法。 第一種：　　 原理就是,在網頁載入時在頁面最中間打入一個層上面顯示,"網頁正在載入中...."當網頁下載完畢,,用JS關閉這個層......。 先在首頁HTML最上面...任意位置都

rem、px、em(手機端h5頁面螢幕適配的幾種方法)

px px畫素（pixel）：相對長度單位。相對於顯示器螢幕解析度而言。pc端使用px倒也無所謂，可是在移動端，因為手機解析度種類頗多，不可能一個個去適配，這時px就顯得非常無力，所以就要考慮em和r

Angular重新整理當前頁面的幾種方法

預設，當收到導航到當前URL的請求，Angular路由器會忽略。 <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 重複點選同一連結頁面不會重新整理。 從Angular 5.1起提供onSameUrlNavi

Angular刷新當前頁面的幾種方法

ignore routes end snapshot true troy 加載 tom roo 默認，當收到導航到當前URL的請求，Angular路由器會忽略。 <a routerLink="/heroes" routerLinkActive="active">

Nginx實現404頁面的幾種方法，你知道幾種

一個網站專案，肯定是避免不了404頁面的，通常使用Nginx作為Web伺服器時，有以下集中配置方式，一起來看看。 第一種：Nginx自己的錯誤頁面 Nginx訪問一個靜態的html 頁面，當這個頁面沒有的時候，Nginx丟擲404，那麼如何返回給客戶端404呢？ 看下面的配置，這種情況下不需要修改

網頁中嵌入flash檔案的幾種方法

<embed allowscriptaccess="never" allownetworking="internal" invokeurls="false" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock

Servlet跳轉頁面的幾種方法總結

servlet跳轉頁面的方法: 跳轉分為兩部分，一部分發生在servlet，另一部分發生在JSP，JSP就是servlet，但是兩者還是有部分差異。 Servlet：（跳轉發生在doGet,doPost等方法裡） （1）redirect方式

HTML 頁面載入 Flash 外掛的幾種方法

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;"> <object classid="clsid:d27cdb6e-ae6d-11cf-

頁面元素居中的幾種方法

1前言 做頁面佈局時，經常會需要將一些頁面元素居中顯示。當然，你可以設定元素的top、left來使它居中，但是，當父容器的大小發生變化，你不得不修改子元素的top、left來使它保持居中；當用戶的顯示器解析度與你的測試機不同，可能會導致介面亂成一片，所以不管從程式碼的易維護

前端頁面跳轉的幾種方法

onclick跳轉 設定window的location.href屬性 onclick="window.location.href='URL'" onclick="location='URL'" 呼叫window的open方法 onclick