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

背景描述

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>

 

参考文献

iframe与主框架跨域相互访问方法

https://blog.csdn.net/fdipzone/article/details/17619673/

 

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值