扇子的前端随笔

页面嵌入iframe层后多次加载出现iframe层内页面错乱问题

2021-04-30  本文已影响0人  折扇随笔

移动端做的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");

        }

上一篇 下一篇

猜你喜欢

热点阅读