Html中 IFrame的用法及注意點(diǎn)

更新時間：2016年12月22日 15:44:07 作者：Supper_litt

這篇文章主要介紹了Html IFrame的用法及注意點(diǎn),非常不錯，具有參考借鑒價值，需要的朋友可以參考下

0x01 iframe的跳出框架

0x02 iframe樣式設(shè)置

0x03 iframe重置高度

1、首先來一個，跳出iframe的好方法，直接可以在Login.aspx頁面使用。

if (window.parent.[IFRAME外殼的某方法]) {
 top.location.href = "Login.aspx";
}

2、再來段比較好看的iframe

<script type="text/javascript">
 function SetWinHeight() {
  var obj = document.getElementById("content");
  var win = obj;
  if (win && !window.opera) {
   if (win.contentDocument && win.contentDocument.body.offsetHeight)
    win.height = win.contentDocument.body.offsetHeight + 20;
   else if (win.Document && win.Document.body.scrollHeight)
    win.height = win.Document.body.scrollHeight + 20;
  }
 }
 window.onresize = function () {
  SetWinHeight();
 }
</script>
<div class="page-body">
 <iframe id="content" src="None.aspx" name="content" onload="javascript:SetWinHeight()" frameborder="0"
  scrolling="auto" style="min-height: 700px;" height="100%" width="100%"></iframe>
</div>

3、子頁面的使用，子頁面，在調(diào)整大小后，可以調(diào)用父頁面的SetWinHeight就可用把布局弄好看了。

if (window.parent.SetWinHeight)
  window.parent.SetWinHeight();

以上所述是小編給大家介紹的Html之 IFrame使用及注意點(diǎn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

html
iframe

相關(guān)文章

使用JavaScript實現(xiàn)計算顏色的相對亮度并確定相應(yīng)的文本顏色
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實現(xiàn)計算顏色的相對亮度并確定相應(yīng)的文本顏色,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
Bootstrap fileinput 上傳新文件移除時觸發(fā)服務(wù)器同步刪除的配置
這篇文章主要介紹了Bootstrap fileinput 上傳新文件移除時觸發(fā)服務(wù)器同步刪除的配置 ,需要的朋友可以參考下
2018-10-10
javascript獲取元素的計算樣式
在做html頁面開發(fā)時，經(jīng)常會使用到j(luò)s（javascript）來處理客戶端的邏輯，下面我們就來看一下，如何使用js來獲取頁面上的元素
2019-05-05
微信公眾號網(wǎng)頁分享功能開發(fā)的示例代碼
這篇文章主要介紹了微信公眾號網(wǎng)頁分享功能開發(fā)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
js canvas實現(xiàn)寫字動畫效果
這篇文章主要為大家詳細(xì)介紹了js canvas實現(xiàn)寫字動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
javascript將扁平的數(shù)據(jù)轉(zhuǎn)為樹形結(jié)構(gòu)的高效率算法
這篇文章主要介紹了javascript將扁平的數(shù)據(jù)轉(zhuǎn)為樹形結(jié)構(gòu)的高效率算法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
js 實現(xiàn)css風(fēng)格選擇器（壓縮后2KB）
近日在做一些OA前端界面，為了更好管理頁面代碼想寫個js選擇器，寫著寫著發(fā)現(xiàn)很費(fèi)力，索性在網(wǎng)上找找看，功夫不負(fù)有心人，找到一個mini css選擇器，且性能不凡：以下代碼是壓縮后的，僅2KB
2012-01-01
關(guān)于Ajax的原理以及代碼封裝詳解
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），相信大家對ajax都很熟悉，下面這篇文章主要給大家介紹了關(guān)于Ajax原理以及代碼封裝的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09
JS實現(xiàn)顯示帶倒影的圖片橫排居中放大展示特效實例【測試可用】
這篇文章主要介紹了JS實現(xiàn)顯示帶倒影的圖片橫排居中放大展示功能,可實現(xiàn)點(diǎn)擊圖片及點(diǎn)擊左右按鈕滑動切換的效果,涉及javascript針對鼠標(biāo)事件的響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-08-08
js點(diǎn)擊返回跳轉(zhuǎn)到指定頁面實現(xiàn)過程
這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊返回跳轉(zhuǎn)到指定頁面實現(xiàn)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-04