Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

父页面bootstrap模态框:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="false" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <iframe style="zoom: 0.8;" height="700px" src="" frameBorder="0" width="99.6%"></iframe>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

父页面js代码 :增加message监听器

function openModal(){
	$(‘iframe‘).attr("src","http://localhost:8080/test/corsPage.html");
    $(‘#myModal‘).modal({backdrop:false});//false:表示单击模态框以外区域不关闭模态框
}
window.addEventListener(‘message‘, receiveMessage, false);
function receiveMessage(evt) {
	var taskData = $.parseJSON(evt.data);
	if(taskData.opt=="C"){
		$("#myModal").modal("hide");
	}
}

子页面corsPage.html,跨域/单独的页面(iframe打开,跟父页面无关),
如何关闭模态框/传值给父页面, JS代码:

var data_ = {"opt":"C"};//Close/Hide modal
window.parent.postMessage(JSON.stringify(data_), ‘*‘);
时间: 2024-10-03 22:53:29

Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框的相关文章

主页面获取iframe 的子页面方法。

父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.window.document.getElementById("button").value="调

跨域IFRAME自适应高度(子页面TAB切换不同的高度,主页面IFRAME嵌套子页面自适应高度)

1.pinganproxy.html <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">eval(function(p,a,c,k,e,r){e=fu

IE8下IFrame 和子页面的通信

业务中遇到这种场景,我们的业务嵌入别的系统中使用,系统采用Iframe调用我们的业务,在使用过程中主要遇到两个问题: 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 2.子页面不同获取外部scrollTop的问题. 这两个问题其实都可以说是跨域通信的问题. 这两个问题我们采用了不同不同的方案来解决. 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 我们采用在外部系统中增加一个代理页面,这样的话这个代理页面就和外部系统处于同一个域中了,相当于我们在外部系统中安插了一个内

使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

<frameset rows="4,200,10,*,120" cols="*" framespacing="0" frameborder="no" border="1" > <frame src=""/> <frame src="<%=practiceInfoSrc %>" id="practiceInfo&quo

iframe根据子页面的内容来设置高度

以下的方法必须起一个页面服务才能使用(通过域名或ip地址来访问)并且的保证父页面与子页面是在同一域名下,不然是会报错的 contentDocument 可以获得iframe子窗口的document对象,兼容ie8+ contentWindow    这是个只读属性,返回指定的iframe的窗口对象. 在iframe加载完毕之后通过contentDocument 或者 contentWindow 这个对象来获取iframe子页面的内容高度,从而来设置设置iframe的高度.再给iframe设置高度

window.open 打开子窗口,关闭所有的子窗口

需求:通过window.open方法打开了子窗口,当关闭主窗口时,子窗口应当也关闭. 实现思路: 1.打开子窗口函数window.open(url,winName)的第二个参数winName可以唯一标识打开的窗口.因此关闭子窗口只需要使用winName.close()函数即可. 2.一个页面可能有多个子窗口.因此需要一个数组存储所有子窗口对象.关闭时,遍历数组即可. 3.子窗口还可以再打开子窗口.无限循环下去.因此需要判断. 此需求可以通过两个方法实现. 调用子窗口的关闭函数. 此方法易于理解,

iframe根据子页面自动调整大小

//iframe高度自适应 function IFrameReSize(iframename) { var pTar = document.getElementById(iframename); if (pTar) { //ff if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) { pTar.height = pTar.contentDocument.body.offsetHeight; } //ie e

html中iframe根据子页面内容动态修改高度

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

通过修改iis的http响应表头来实现iframe打开sharepoint页面

http://tech.ddvip.com/2013-11/1384875170206227.html http://www.enhanceie.com/test/clickjack/