Recently I have been asked for help with a set of HTML pages, that failed to work as expected. The setup consisted of a frameset, where links shown in some frame should open in some other frame. This should be accomplished by the target attribute on the anchor element, or a base element with a target attribute in the page containing the link.
The problem was that links did not open in the desired target frame, but in a different tab.
After some analysis, I found out that this behavior was caused by the presence of a Javascript variable "name", which was present on the page that was initially loaded in the target frame. If the value of that variable did not match the name of the target frame, the link opened on a new tab. In case it matched the target frame name, the link opened in the target frame, as expected.
This happens consistently in recent versions of at least three browsers (tried Firefox, Chrome, and Edge).
I would like to know why it works this way.
Here is a small reproduction of the issue (also available here), with a frameset, three frames with initial content, and two links. The first link, with target="two", opens in frame "two". But the second link, with target="three", does not open in frame "three", instead it opens in a new tab. Apparently this depends on the value of Javascript variable "name" in the initial content of that frame, three.html. But why?
index.html:
<html>
<frameset rows="33%,33%,*">
<frame name="one" src="one.html">
<frame name="two" src="two.html">
<frame name="three" src="three.html">
</frameset>
</html>
one.html:
<html>
<body>
frame "one"
<br>
<a target="two" href="content.html">show content (target="two")</a>
<br>
<a target="three" href="content.html">show content (target="three")</a>
</body>
</html>
two.html:
<html>
<body>
frame "two"
<script>
<!--
var name = "two";
//-->
</script>
</body>
</html>
three.html:
<html>
<body>
frame "three"
<script>
<!--
var name = "two";
//-->
</script>
</body>
</html>
content.html:
<html>
<body>
content
</body>
</html>
The reason for this is that by setting the variable name in the pages, you are overriding the Window.name variable.
And that Window.name variable is what the system uses to determine the Frame's name. When you override this value and change it, and then try to reach the frame with the older value, then you are redirected to a new tab.