使用iframe可以加載其他頁面的元素,比較方便,但是在實際運用中,
在某些瀏覽器中或發生某種行為時會出現加載兩次或多次請求的問題,導致資源浪費.
正常使用時如下方這種情況:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="demo0.html" frameborder="0"></iframe>
<button class="btn">按鈕</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
var num = 0
$(".btn").click(function () {
num++;
$("iframe").attr("src", "demo" + num + ".html")
})
</script>
</html>
這樣我們會發現每次點擊都會只觸發一次報錯,那證明了其實每次只觸發了一次,這樣是正常的.
當我們切換下面的寫法時,會出現不同的情況.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="demo0.html" frameborder="0"></iframe>
<button class="btn">按鈕</button>
<div class="box">
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
var num = 0
$(".btn").click(function () {
num++;
$(".box").html($("iframe").attr("src", num))
})
</script>
</html>
運行這段代碼會發現每次點擊的時候都會產生兩次報錯，
分析原因：
這樣我們會發現會觸發兩次報錯,這是為什么?
經過調查發現,在JS生成src的時候,是可以正常呼叫一次請求的,
在實際開發時，我們通常會把iframe標簽做成彈框的形式來展現，這樣在做彈框的時候，就會對生成后的iframe標簽進行移動，生成iframe標簽之后,對dom元素移動之后就會產生兩次請求.說明移動
dom元素會再一次觸發iframe標簽觸發請求.
這兩次請求分別為:
一次是在加載時生成dom元素時發送的請求,
另一次是移動dom元素時發送的請求.
解決方法：
第一種方法
不要在js生成時候在進行dom元素的移動,而是通過js生成dom元素.
<script>
var num = 0
$(".btn").click(function () {
num++;
$(".box").html("<iframe src=" + num + "></iframe>")
})
</script>
第二種方法
每次生成dom元素的時候,清空之前的iframe標簽,一定意義上就是說去除了iframe的請求
<script>
var num = 0
$(".btn").click(function () {
num++;
$(".box").empty();
$(".box").html($("iframe").clone().attr("src", num))
})
</script>
通過這兩種方法，再看就發現發次只會進行一次請求了，
在這里插入圖片描述
以上就是對前端開發時使用iframe標簽的時候發生兩次請求問題的解決方法，歡迎大家討論交流，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249086.html
標籤：其他