我這里要實現的效果是子集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 οnclick="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();
}

轉載于:https://www.cnblogs.com/hjptopshow/p/6859999.html

總結

以上是生活随笔為你收集整理的当前页面怎么调用子集iframe页面的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。