对于一项作业，我必须制作一个网页，通过单击“LeftFrame”中的超链接来切换“RightFrame”中的图像。我应该使用这个功能:
<html>
<head>
<title>Assignment</title>
<script>
function setImage(index)
{
if (index == 1)
{
RightFrame.document.RightImage.src = "Alumni Hall.jpg";
}
if (index == 2)
{
RightFrame.document.RightImage.src = "Clock Tower.jpg";
}
if (index == 3)
{
RightFrame.document.RightImage.src = "Elliot Hall.jpg";
}
if (index == 4)
{
RightFrame.document.RightImage.src = "Football Field.jpg";
}
if (index == 5)
{
RightFrame.document.RightImage.src = "North Hall.jpg";
}
if (index == 6)
{
RightFrame.document.RightImage.src = "South Hall.jpg";
}
if (index == 7)
{
RightFrame.document.RightImage.src = ="Straughn Hall.jpg";
}
return;
}
</script>
</head>
<frameset cols="20%,*">
<frame name="LeftFrame" src="left3.html">
<frame name="RightFrame" src="right1.html">
</frameset>
</html>
但是，我无法让它在没有跨源错误的情况下运行。我一直在尽我所知的一切努力让它发挥作用，但我对此仍然很陌生。非常感谢您的帮助。
最佳答案
这是一个解决方案模板:
左3.html
<html>
<head>
<title>Assignment</title>
<script>
function setImage(index)
{
parent.frames.RightFrame.window.postMessage(index);
return;
}
</script>
</head>
<body>
<button onclick="setImage(55);">Set Image 55</button>
</body>
</html>
右1.html
<html>
<head>
<title>Assignment</title>
<script>
window.addEventListener("message",function(e)
{
alert(e.data);
setImage(e.data);
});
function setImage(index)
{
if (index == 55)
{
document.getElementById("RightImage").src = "up_arrow.gif";
}
return;
}
</script>
</head>
<body>
<img src="wt.gif" id="RightImage" >
</body>
</html>
1.html
<html>
<head>
<title>Assignment</title>
</head>
<frameset cols="20%,*">
<frame name="LeftFrame" src="left3.html">
<frame name="RightFrame" src="right1.html">
</frameset>
</html>
关于Javascript 框架和框架集，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59020326/