子頁面中全局name改變導致a標簽target屬性失效問題


先丟兩個示例頁面上來,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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM