先丟兩個示例頁面上來,test1.html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test</title>
</head>
<body>
<a href="test2.html" target="iframe">test</a>
<iframe src="test2.html" frameborder="0" name="iframe" id="iframe"></iframe>
</body>
</html>
test2.html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test2</title>
</head>
<body>
<button id="button">變化name</button>
<script>
var button = document.getElementById("button");
button.onclick = function(){
name = 123;
}
</script>
</body>
</html>
今天后端人員遇到這么一個問題,在子頁面中改變name值以后,父頁面中的a標簽的target將會失效,不會再指定的iframe中加載頁面。
出現該問題的原因是window對象中有name屬性,a標簽打開頁面的時候會去查找iframe中頁面的window.name從而確定在哪個iframe中打開指定頁面。在子頁面中改變了name值,導致無法找到iframe,所以會在新的頁面中加載。要避免該問題只要注意變量在使用前先進行聲明即可。
test2.html(修改后)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test2</title>
</head>
<body>
<button id="button">變化name</button>
<script>
var button = document.getElementById("button");
button.onclick = function(){
var name = 123;
}
</script>
</body>
</html>
