css方法

Iframe的強大功能偶就不多說了，它不但被開發人員經常運用，而且黑客們也常常使用它，總之用過的人知道它的強大之處，但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應，這一點讓很多人都頭疼萬分。百度或是谷歌一下，確實很多解決方法，但嘗試一下，會發現問題很多：瀏覽器相容性差，不能自適應，僅支援同域Iframe等諸多問題，尤其是跨域Iframe高度自適應問題。網上根本找不到一種可行的方案（唯一有一種提到加入代理頁面的，經過測試發現無用）。難道真的沒有一種可行的解決方案了嗎？ No，下面小鳴子和大家分享一種強大的方法，程式碼如下：

<html>
<head>
<style>
body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;}
</style>
</head>

</body>

</html>

程式碼強大之處：

1. 該方法完美相容IE6，7，8 ，Fire fox,chrome，opera 等主流的瀏覽器；

2.同域，跨域皆支援；

3.不呼叫任何JS指令碼；

注意三點.

1. 檔案開頭不能是：

<!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">

必須是<html>開頭

2. body樣式中的 overflow: hidden; 絕對不對省略；

3.Iframe 中的 height='100%' 以及滾動條不能設為no(預設是yes，不用設定即可)

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

js方法

假設 A.html domain是 localhost， B.html domain 是 127.0.0.1 （跨域）

這裡使用 localhost 與 127.0.0.1 只是方便測試，localhost 與 127.0.0.1已經不同一個域，因此執行效果是一樣的。

實際使用時換成 www.domaina.com 與 www.domainb.com 即可。

A.html中iframe 嵌入 B.html，name=myframe

A.html有js function fMain()

B.html有js function fIframe()

需要實現 A.html 呼叫 B.html 的 fIframe()，B.html 呼叫 A.html 的 fMain() （跨域呼叫）

如果使用上面同域的方法，瀏覽器判斷A.html 與 B.html 不同域，會有錯誤提示。

Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://127.0.0.1". Protocols, domains, and ports must match.

實現原理：

因為瀏覽器為了安全，禁止了不同域訪問。因此只要呼叫與執行的雙方是同域則可以相互訪問。

首先，A.html 如何呼叫B.html的 fIframe方法

1.在A.html 建立一個 iframe

2.iframe的頁面放在 B.html 同域下，命名為execB.html

3.execB.html 裡有呼叫B.html fIframe方法的js呼叫

[javascript] view plain copy

<script type="text/javascript">
parent.window.myframe.fIframe(); // execute parent myframe fIframe function
</script>

這樣A.html 就能通過 execB.html 呼叫 B.html 的 fIframe 方法了。

同理，B.html 需要呼叫A.html fMain方法，需要在B.html 嵌入與A.html 同域的 execA.html

execA.html 裡有呼叫 A.html fMain 方法的js 呼叫

[javascript] view plain copy

<script type="text/javascript">
parent.parent.fMain(); // execute main function
</script>

這樣就能實現 A.html 與 B.html 跨域相互呼叫。

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="content-type"content="text/html; charset=utf-8">
<title> main window </title>
<scripttype="text/javascript">
// main js function
function fMain(){
alert('main function execute success');
}
// exec iframe function
function exec_iframe(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://127.0.0.1/execB.html';
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
}else{
exec_obj.src = 'http://127.0.0.1/execB.html?' + Math.random();
}
}
</script>
</head>
<body>
<p>A.html main</p>
<p><inputtype="button"value="exec iframe function"onclick="exec_iframe()"></p>
<iframesrc="http://127.0.0.1/B.html"name="myframe"width="500"height="100"></iframe>
</body>
</html>

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="content-type"content="text/html; charset=utf-8">
<title> iframe window </title>
<scripttype="text/javascript">
// iframe js function
function fIframe(){
alert('iframe function execute success');
}
// exec main function
function exec_main(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://localhost/execA.html';
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
}else{
exec_obj.src = 'http://localhost/execA.html?' + Math.random();
}
}
</script>
</head>
<body>
<p>B.html iframe</p>
<p><inputtype="button"value="exec main function"onclick="exec_main()"></p>
</body>
</html>

execA.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="content-type"content="text/html; charset=utf-8">
<title> exec main function </title>
</head>
<body>
<scripttype="text/javascript">
parent.parent.fMain(); // execute main function
</script>
</body>
</html>

execB.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta

相關推薦

跨域設定iframe的高度自適應

css方法 Iframe的強大功能偶就不多說了，它不但被開發人員經常運用，而且黑客們也常常使用它，總之用過的人知道它的強大之處，但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應，這一點讓很多人都頭疼萬分。百度或是谷歌一下，確實很多解決方法，但嘗試一

CSS完美實現iframe高度自適應（支持跨域）

真的高度 org lns nal aid .org bsp 方法 Iframe的強大功能偶就不多說了，它不但被開發人員經常運用，而且黑客們也常常使用它，總之用過的人知道它的強大之處，但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應，這一點讓很多人都頭

CSS完美實現iframe高度自適應（支援跨域）

Iframe的強大功能偶就不多說了，它不但被開發人員經常運用，而且黑客們也常常使用它，總之用過的人知道它的強大之處，但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應，這一點讓很多人都頭疼萬分。百度或是谷歌一下，確實很多解決方法，但嘗試一下，會發現問題很多：瀏覽器相容性差，不能自

iframe高度自適應子頁面高度使用onload屬性

sca height init window 屬性 fun frame var scroll <!DOCTYPE html> <html> <head> <title>測試</title> <

iframe高度自適應

borde 16px div 後者 size 我們第一次用一次 edit 　　第一次用iframe標簽代替ajax異步刷新去做後天管理系統，發現iframe的確是個好東西。但有個最大的問題就是——高度不能自適應，要麽設置死，要麽用js去動態獲取目標資源body的heig

IE8,11的iframe高度自適應

相容模式：function iFrameHeightTzinfo() { var ifm= document.getElementById("iframe_tzinfo"); //var subWeb = document.frames ? document.frames["ifra

jquery之div模擬textarea文字域輕鬆實現高度自適應

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="tex

iframe高度自適應頁面的高度

<div class="tpl-content-wrapper"> <iframe id="frameId" frameborder="0" scrolling="no" height="auto" src="" onLoad="iFrameHei

總結iframe高度自適應，自適應子頁面高度

var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false; var isFireFox = brow

vue中使用element框架設定表格高度自適應

在定義表格高度時使用 :height="tableHeight" （element框架定義高度便會固定表頭，注意通過data()中獲取高度值的方法需要在height前面加上":" ）在data()中設定tableHeight的值。 data() { return {

內容寬度變化的iframe高度自適應

<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe> <script type="text/j

iframe高度自適應問題

今天寫了一下html靜態頁，遇到iframe高度自適應問題。本來是使用bootstrap的，看它上面的文件說直接使用它們給好樣式就可以了。但是並沒有達到要的效果。最後使用了這個中方法解決了。 <div class="col-lg-10 col-md-10">

自動載入的iframe高度自適應

動態產生iframe，自動載入至body中，還有一個功能就是iframe的高度自適應，下面程式碼測試於IE和Firefox,Chrome: http://www.cnblogs.com/insus/p/3521418.html

iframe高度自適應的6個方法

原文連結：http://caibaojian.com/iframe-adjust-content-height.htmlJS自適應高度，其實就是設定的高度，使其等於內嵌網頁的高度，從而看不出來滾動條和巢狀痕跡。對於使用者體驗和網站美觀起著重要作用。如果內容是固定的，那麼我

Iframe 高度自適應

沒有 border off right The style 需要是否開始實現 iframe 的自適應高度，能夠隨著頁面的長度自動的適應以免除頁面和 iframe 同時出現滾動條的現象。（需要只有iframe出現滾動條）剛開始以為是很小的問題一直沒註意，但是經常頁

html iframe高度自適應

() function Language nload ont The 有一種 sub scrip 想到的一種辦法是，在父頁面裏獲取子頁面的高度，在父頁面onlod裏把獲取到子頁面的高度賦值給父頁面iframe標簽，不過這種方法感覺不是很好，因為瀏覽器兼容性不好，獲取不到高度

iframe高度自適應，取消滾動條

專案中碰到左側是一個列表，是固定定位，點選不同的列表選項右側引入不同的iframe地址檔案，但是iframe設定屬性的時候高度只識別px，設定百分百之類的都無效，並且不想要iframe本身的滾動條，頁面只需要一個預設的滾動條。實現效果如下圖：html程式碼： <i

iframe高度自適應、載入完成事件

高度自適應 ------------------------------------------------- 方法一：經典程式碼 iFrame 自適應高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通過測試。只適用於同

div裡巢狀iframe，設定iframe及div的高度自適應

1. div+iframe <div class="main"> <iframe id="contentFrame" name="contentFrame" src="url" onload="javascript:reinitIframe(

div模擬textarea文本域輕松實現高度自適應

body post HR word-wrap overflow out 模擬 target get <style> .textarea{ width:400px; min-height:20px; max-height:300p

跨域設定iframe的高度自適應

css方法

js方法

相關推薦