移动端做的iframe层的嵌入,后来发现多次打开同一个iframe后会出现iframe层内代码的叠加效果。
最初代码
<div class="jd_search_box"><iframe src="" frameborder="" id="search_iframe"></iframe></div>
js
$("#search_iframe").attr('srcdoc',strValue.result);//strValue.result是通过接口动态获取的
// 关闭页面与搜索页搭配使用
function close_search() {
$(".jd_search_box").removeClass("show");
$("body").css("overflow", "auto");
}
寻找原因发现是 因为关闭iframe层时只做了简单的隐藏,而没有清除已加载代码,而导致了iframe内代码多次加载了重复了。于是我做了一个简单的清除。每次关闭iframe层后就直接将iframe代码给删了,再次打开是才重新写入。简单粗暴!
<div class="jd_search_box"></div>
$(".jd_search_box").prepend('<iframe src="" frameborder="" id="search_iframe"></iframe>')
。。。
$("#search_iframe").attr('srcdoc',strValue.result);
function close_search() {
$(".jd_search_box").removeClass("show");
$("#search_iframe").remove();
$("body").css("overflow", "auto");
}