点击按钮加载iframe再次点击关闭iframe_iframe如何多次点击-CSDN博客

本文链接：https://blog.csdn.net/wuhuang040924/article/details/50357745

本文介绍了一种改进商务通对话窗口加载机制的方法，通过点击按钮触发iframe内容的加载和卸载，避免了访客进入网站即启动对话的情况，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最初是因为网站里头要嵌入商务通对话窗口

但是如果一开始frame就是打开的，会导致只要有访客进来，就会打开一个对话，导致客服要处理太多对话了。

所以处理方法是打开的时候只有点击按钮才将frame的内容加载进来append，关闭的时候将frame这个div的内容remove掉

而通过改变frame src的方法是不行的，离开的时候置空会有个提示是否离开的提示框，与实际情况不符合

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script src="./jquery.js"></script>
<script>

function openme(){
var num = window.frames.length;

//window.frames[0].location.href = "http://www.sina.com.cn";
//document.getElementById('swtframe').src = "http://bwt.zoossoft.cn:88/LR/Chatpre.aspx?id=BWT74388660&lng=cn&e=zixunbaobao";
var inserthtml = '<iframe id="swtframe" src="http://pet.zoosnet.net/LR/Chatpre.aspx?id=PET80862092&lng=cn&e=zixunbaobao" name="swtframe" width="100%" height="100%" srcoll="yes" ></iframe>';

$("#swtcenter").append(inserthtml);

}

function leaveme(){
//window.frames[0].document.onbeforeunload = "";
//document.getElementById('swtframe').src = "";
$("#swtcenter :first-child").remove();
}
</script>
</head>
<body>
<div id="swtcenter" style="width:800px;height:600px;position:fixed;z-index:999;top:50%;left:50%;margin-left:-400px;margin-top:-300px;"></div>

<div id="zixunbaobao" style="position:fixed;z-index:999;top:0px;left:0px;width:60px;height:30px;" οnclick="openme()">打开我</div>
<div id="zixunbaobao" style="position:fixed;z-index:999;left:80px;top:0px;width:60px;height:30px;" οnclick="leaveme()">关闭我</div>
</body>
</html>