layui 跨域弹窗，留言成功后关闭弹窗，iframe与主框架跨域相互访问方法

最新推荐文章于 2024-06-28 19:52:01 发布

橙-极纪元JJY.Cheng

最新推荐文章于 2024-06-28 19:52:01 发布

阅读量4.2k

点赞数 1

分类专栏： # JQ JS 前端HTML

本文链接：https://blog.csdn.net/cplvfx/article/details/88286384

版权

JS 同时被 3 个专栏收录

163 篇文章 4 订阅

订阅专栏

113 篇文章 1 订阅

订阅专栏

前端HTML

81 篇文章 1 订阅

订阅专栏

背景描述

B域名作为主域，所有的留言信息都会在B域名的留言列表里。

所有的留言：指的是A、B、C、D、E、F、G域名网站的留言信息都会放到B域名里面

1、A域名（展示页）用于：点击按钮激活弹窗去调用B域名的留言页面

2、B域名（主框架）用于：接受所有其他网站的留言信息

3、A域名closelayer.htm （关闭展示页的弹窗页）用于：调用A域名展示页的关闭弹窗方法

实现步骤：

1.点击按钮激活弹窗去调用B域名的留言页面；弹窗里面用iframe装B域名的留言板页面

2.B域名留言板在加载的时候把URL的参数通过getUrlParam（）方法过滤后，赋值给表单；

3.当留言成功后，调用iframe_closelayer（）方法，在当前增加一个iframe装的是A域名的closelayer.htm页面，并且隐藏显示，这个时候closelayer.htm页面就会调用A域名的关闭弹窗的方法，关闭弹窗。

完成：

击按钮激活弹窗，留言成功后关闭弹窗，所有留言的信息都会在B域名的留言列表里

下面是核心代码

A域名网站

  <script type="text/javascript">
  var sitename="{site.name}"
  </script>

按钮

<a href="javascript:;" onclick="tanchuang_name('免费领取样品产品','首页','立即免费领取')"><img src="<%templateskin%>/img/hq_gd1.jpg" /></a>

JS

//txt_title：弹窗标题
//txt_laiyuan：弹窗来源，例如：首页
//txt_btn：提交按钮文字

var index;

function tanchuang_name(txt_title, txt_laiyuan, txt_btn) {
	var cp_link='cp_link='+document.domain+'&';
	var txt_laiyuan_site='txt_laiyuan_site='+sitename+'&';
	var txt_laiyuan='txt_laiyuan='+txt_laiyuan+'-'+txt_title+'&';
	    txt_btn='txt_btn='+txt_btn+'&';
	
    index=layer.open({
        type: 2,
        title: [txt_title, 'font-size:18px;text-align:center; padding-left:70px;'],
        area: ['440px', '300px'],
        closeBtn: 1,
        content: 'http://www.b.com/feedbackname.html?'+cp_link+txt_laiyuan_site+txt_laiyuan+txt_btn+"mr="+Math.random(), 
    });
}


function CpLayerClose(){
layer.close(index);
console.log("CpLayerClose");
}

var index;

这个变量很重要，他的作用是，记录打开A域名的弹窗，此时弹窗里面的页面是用iframe标签展示B域名的页面，当B域名提交留言后，用于关闭A域名的弹窗。

拼接字符串传递参数，

content: 'http://www.b.com/feedbackname.html?'+cp_link+txt_laiyuan_site+txt_laiyuan+txt_btn+"mr="+Math.random()

拼接后的字符串

http://www.b.com/feedbackname.html?cp_link=cfzsmgs.com&txt_laiyuan_site=网站名&txt_laiyuan=首页-免费领取样品产品&txt_btn=立即免费领取&mr=0.9185302191829308"

弹窗

A域名页面：closelayer.htm

这个页面用于B域名关闭A域名页面弹窗

<html>  
 <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <title> exec main function </title>  
 </head>  
  
 <body>  
    <script type="text/javascript">     
        parent.parent.CpLayerClose(); // execute main function  
    </script>  
 </body>  
</html>

这里的CpLayerClose()方法，调用的就是上面JS里面的方法！

B域名

html

	<div id="tanchuang_name" class="tanchuang">
			<div  class="tanchuang_content">
			 
				<div class="tanchuang_body"> 
					<form id="feedback_form" name="feedback_form" url="{config.webpath}plugins/feedback/ajax.ashx?action=add&site={site.name}">
                        <input type="hidden" id="txtlaiyuan_site" name="txtlaiyuan_site" value="">
                        <input type="hidden" id="txtlaiyuan_ad" name="txtlaiyuan_ad" value="">							
                        <div><input type="text" placeholder="姓名" id="txtUserName" name="txtUserName" datatype="*"></div>
						<div class="tishi"><img src="{config.webpath}templates/main/cpimg/anquan_icon.png">信息保护中，请放心填写</div>
						<div><input type="text" placeholder="手机号码" id="txtUserTel" name="txtUserTel" datatype="m" errormsg="手机号码格式不对！"></div>
						<div><input id="btnSubmit" name="btnSubmit" type="submit" value="立即咨询"></div>
					</form>
				</div>
			</div>
		  </div>

JS

    <script type="text/javascript">
        $(function () {
            //初始化发表评论表单
            AjaxInitForm('#feedback_form', '#btnSubmit', 1);
			$('input#txtlaiyuan_site').val(getUrlParam('txt_laiyuan_site'));
			$('input#txtlaiyuan_ad').val(getUrlParam('txt_laiyuan'));
			$('input#btnSubmit').val(getUrlParam('txt_btn')); 
        });
		
//过滤URL的参数
	function getUrlParam(name){   
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");    
        var r = window.location.search.substr(1).match(reg);    
        if (r != null) {
		return decodeURI(r[2]); return null;    
		}
    } 
	
//留言成功后，跨域访问A域名的closelayer.htm页面，让这个页面去关闭A域名的弹窗
	  function iframe_closelayer(){   
    if(typeof(exec_obj)=='undefined'){  
        exec_obj = document.createElement('iframe');  
        exec_obj.name = 'tmp_frame';  
        exec_obj.src = 'http://'+getUrlParam('cp_link')+'/closelayer.htm';  
        exec_obj.style.display = 'none';  
        document.body.appendChild(exec_obj);  
    }else{  
        exec_obj.src = 'http://'+getUrlParam('cp_link')+'/closelayer.htm?' + Math.random();  
    }  
  }  
    </script>