JavaScript實作iframe自動高度調整和不同主域名跨域_javascript技巧
大家都知道Js有同源策略，就是主網域不同嵌套的iframe不允許Js溝通的。
例如我有一個網站，網站中要嵌入其網站的頁面。那我可以使用iframe引用第三方網站的地址即可。
但是問題也來的iframe的高度是固定的不能與第三方網站很好的融合，又例如第三方網站使用了瀑布流插件，要滾動加載自動計算高度，那麼先說跨域：iframe主網域不同跨域方法，假如網站A.com B.com A 裡面放入一個iframe 引用了B.com，這種情況下B.com裡面的Js是無法訪問到A.com的。 JS跨域必須是同源，就是同一個主域名，那腫呢？
我們可以在B.com中引入一個iframe，暫且叫C吧 這個iframe載入A.com中的一個網頁。這樣同源就有了B.com中的iframe中的網頁就可以和A.com通訊了。下面只要B和C通訊，讓C和A通訊就完成B->A通訊，這樣當B高度變化時通知C，讓C通知A把iframe高度調整。
B和C通訊，其實透過url位址就可以實現通訊了，B.com iframe設定為隱藏，改變src位址時候C就可以接收。
廢話不說了上碼
A.com/index.html
<html>
<script src="{$smarty.const.STATIC_URL}/js/jquery-1.7.1.min.js"></script>
<script>
var test = function() {
$('#h1').html('test');
}
</script>
<body>
<h1 id="h1">nba.alltosun.net</h1>
<iframe id="ifm" width="760" height="100" src="http://***.sinaapp.com/"></iframe>
</body>
</html>
B.com/index.html
<html>
<head></head>
<body>
<h1>**.appsina.com</h1>
<button id="button">设置高度</button>
<div id="div" style="height:200px;display:none;"></div>
<script src="http://nba.alltosun.net/js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
window.ifrH = function(e){
var searchUrl = window.location.search;
var b = null;
var getParam = function(url, param) {
var q = url.match(new RegExp( param + "=[^&]*")),
n = "";
if (q && q.length) {
n = q[0].replace(param + "=", "");
}
return n;
}
var f = getParam(searchUrl,"url"),
h = getParam(searchUrl, "ifmID"),
k = getParam(searchUrl, "cbn"),
g = getParam(searchUrl, "mh");
var iframeId = 'testiframe';
var iframe = document.getElementById(iframeId);
var divId = 'alltosun';
if (!iframe){
var iframe = document.createElement('iframe');
iframe.id = iframeId;
iframe.style.display = "none";
iframe.width = 0;
iframe.height = 0;
document.body.appendChild(iframe);
}
if (e && e.type == "onload" && h) {
b.parentNode.removeChild(b);
b = null;
}
if (!b) {
b = document.createElement("div");
b.id = divId;
b.style.cssText = "clear:both;"
document.body.appendChild(b);
}
var l = b.offsetTop + b.offsetHeight;
iframe.src = (decodeURIComponent(f) ||
"http://*****/test2") + "&h=" + l + "&ifmID=" + (h || "ifm") + "&cbn=test" + "&mh=" + g + "&t=" + ( (+ new Date()));
if (e && e.type =="onload") {
window.onload = null;
}
}
window.onload = function() {
ifrH({type: "onload"});
}
// ifrH();
$('button').click(function(){
$('div').show();
ifrH();
})
})
</script>
</body>
</html>
C 代理文件
<script>
var search = window.location.search,
getSearchParam = function (search, key) {
var mc = search.match (new RegExp ( key + "=([^\&]*)") ),
ret="";
mc && mc.length && (ret = mc[0].replace( key + "=",""));
return ret;
},
// 参数h
h = getSearchParam(search,"h"),
ifmID = getSearchParam(search,"ifmID"),
cbn = getSearchParam(search,"cbn"),
// 宽高
mh = getSearchParam(search,"mh") || h,
isFunction = function(fn){
return !!fn && !fn.nodeName && fn.constructor != String
&& fn.constructor != RegExp && fn.constructor != Array
&& (/function/i).test(fn + "");
};
try{
if(parent && parent.parent){
ifm = parent.parent.document.getElementById(ifmID);
ifm && mh && (ifm.height=mh);
fn=parent.parent[cbn];
isFunction(fn) && fn.call();
ifm=null;
}
}catch(ex){
console.log(ex);
}
</script>
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
監控iframe的滾動行為
Feb 18, 2024 pm 08:40 PM
如何監聽一個iframe的滾動，需要具體程式碼範例當我們在網頁中使用iframe標籤嵌入其他網頁時，有時需要對iframe中的內容進行一些特定的操作。其中一個常見的需求是監聽iframe的捲動事件，以便在捲動發生時執行對應的程式碼。以下將介紹如何使用JavaScript來監聽一個iframe的捲動，並提供具體的程式碼範例供參考。在取得iframe元素首先，我們需要
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
jQuery如何移除元素的height屬性？
Feb 28, 2024 am 08:39 AM
jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
