博客首页 > 其他内容
子页面中全局name改变导致a标签target属性失效问题的解决办法
2025/5/4 15:05:32
先丢两个示例页面上来，test1.html页面
1 2 3 4 5 6 7 8 9 10 11 12 | <!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页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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（修改后）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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> |
以上介绍是从网上找到的，也是正确的方法，但我遇到的问题是子页面的JS竟然加密了，我没办法修改子页面的window.name
我尝试修改父框架的name,发现改了什么都没用，子页面应该使用了自动获取父页面name的办法
讨厌的事情果然很讨厌！
最后在子页面底部，也就是加密内容的最后面，单独加上了
<script>window.name="main"</script>
竟然生效了，target不再失效，衔接不会再跳出frame了！
子页面也能正常使用，那子页面定义的window.name除了制造了麻烦，还能干嘛用呢？
