JavaScript框架和框架集

Dap 发表于 Dev

小睡

对于作业，我必须创建一个网页，通过单击“ 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>

但是，如果没有跨原点错误，我将无法使其运行。我一直在尽我所能尝试一切，但是我仍然是新手。帮助将不胜感激。

米科拉·乌斯帕连科（Mykola Uspalenko）

这是一个解决方案模板：

left3.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>

right1.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。