1. 程式人生 > >當前頁面怎麽調用子集iframe頁面的方法

當前頁面怎麽調用子集iframe頁面的方法

當前頁 spl image absolute lin htm center 媽媽 當前

我這裏要實現的效果是子集iframe頁面點擊背景那個頭像旁邊的一個取消按鈕要跳出這個模態框,這個模態框HTML在當前頁面也就是子頁面iframe的母級頁面,取消按鈕在子集iframe裏面上面有個enterOut(),所以問題來了,怎麽去實現(當前是媽媽,要點擊右邊兒子是iframe裏面那個取消按鈕實現彈出模態框效果)

技術分享

<div id="hz_qxalert1_id" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.701961);">
<div id="hz_qxalert1_id_next" style="width: 400px; height: 203px; padding: 0px 0px 20px; position: absolute; top: 77px; left: 484px; z-index: 500; border: 1px solid rgb(22, 138, 187); border-radius: 5px; overflow: hidden; display: block; background: rgb(255, 255, 255);">
<p style="padding: 0 0 0 28px;text-align: left; height:50px; line-height:50px; z-index: 500;">消息會診</p>
<hr style="border-color:#ccc;width: 80%;margin: 0 auto;">
<p class="alert_text" style="height: 80px; line-height:80px; z-index: 500;text-align: center;">您將取消會診,確認取消會診嗎?</p>
<button onclick="enterOut()" class="btn1" style=" z-index: 500;height:30px; outline: none;text-align: center;background: #168ABB;border:0;color:#fff; border-radius:5px;width: 89px;margin-left: 185px;">是</button>
<button class="btn1" style="height:30px; outline: none;text-align: center;background: #168ABB;border:0;color:#fff; border-radius:5px;width: 89px; z-index: 500;">否</button>
</div>
</div>

技術分享

上圖是當前頁面一個id為hz_qxalert1_id的模態框和一個class為box的div,

技術分享

然後box裏面套了一個content類

技術分享

技術分享

這裏是當前頁面所套的ifreme我們先找它的ID找到了 才能解決一系列問題哦

子集iframe這樣寫

function son{

//讓父級的模態框遮罩層顯示出來
parent.document.getElementById(‘hz_qxalert1_id‘).style.display = "block";

//獲取遮罩層的寬、高
var modelWidth = self.parent.$(‘#hz_qxalert1_id‘).width();
var modelHeight= self.parent.$(‘#hz_qxalert1_id‘).height();

//獲取取消會診確認框的寬、高
var alertWidth = self.parent.$(‘#hz_qxalert1_id_next‘).width();
var alertHeight= self.parent.$(‘#hz_qxalert1_id_next‘).height();

//讓取消會診確認框相對於模態框居中
parent.document.getElementById(‘hz_qxalert1_id_next‘).style.left = (modelWidth-alertWidth)/2+"px";
parent.document.getElementById(‘hz_qxalert1_id_next‘).style.top = (modelHeight-alertHeight)/2+"px";

//讓取消會診的確認框顯示出來
parent.document.getElementById(‘hz_qxalert1_id_next‘).style.display = "block";
//這裏下面這句就可以找到第一個iframe啦然後賦值哦
var content_inner_iframe_id = parent.$(‘.content_inner‘).children(‘iframe:eq(0)‘).attr(‘id‘);
parent.myIframeId = content_inner_iframe_id;
console.log(content_inner_iframe_id);

}

然後在當前(母級)頁面寫這樣一個方法

function enterOut(){

//隱藏取消會診消息模態框
document.getElementById(‘hz_qxalert1_id‘).style.display = "none";

//隱藏取消會診消息框
document.getElementById(‘hz_qxalert1_id_next‘).style.display = "none";

//執行取消會診事件(拿到子級寫好的id這裏當前頁面直接拿來然後調用沒毛病)
var childrenFun = document.getElementById(myIframeId).contentWindow;
childrenFun.enterOut();
}

當前頁面怎麽調用子集iframe頁面的方法