初学者JavaScript / HTML框架通信

Beginner JavaScript/HTML Frame Communication

本文关键字：框架 通信 HTML JavaScript 初学者      更新时间：2023-09-26

我在网页设计课上的一项作业是创建一个页面，其中两个框架使用 JavaScript 进行通信。下帧（下2.html）上有四个链接，单击时，它们应该将上帧（上1.html）中的图像更改为相应的图像，但不会。这是我所拥有的：

文件名： js-十七.html.这是我执行的那个。 

<HTML>
<HEAD>
<TITLE>HTML and JavaScript</TITLE>
</HEAD>
<FRAMESET ROWS="140,*">
<FRAME NAME="upperFrame" SRC="upper1.html">
<FRAME NAME="lowerFrame" SRC="lower2.html">
</FRAMESET>
</HTML>

文件名：upper1.html。这是显示图像的上部框架。

<HTML>
<HEAD>
<TITLE>HTML and JavaScript</TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG NAME="upperImage" SRC="lions.gif">
</CENTER>
</BODY>
</HTML>

文件名：下2.html。这是包含应更改图像但不更改图像的链接的下部框架。无论我点击什么，它都会保留在默认的狮子.gif上。

<HTML>
<HEAD>
<TITLE>HTML and JavaScript</TITLE>
<SCRIPT>
function setImage(number)
{
if (number==1)
{
    parent.upperFrame.document.upperImage.src="lions.gif";
}
if (number==2)
{
    parent.upperFrame.document.upperImage.src="tigers.gif";
}
if (number==3)
{
    parent.upperFrame.document.upperImage.src="bears.gif";
}
if (number==4)
{
    parent.upperFrame.document.upperImage.src="ohmy.gif";
}
return;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H2>IMAGE LIST</H2>
<TABLE>
<TR><TD><A HREF="javascript:setImage(1)">1: LIONS.GIF</A></TD></TR>
<TR><TD><A HREF="javascript:setImage(2)">2: TIGERS.GIF</A></TD></TR>
<TR><TD><A HREF="javascript:setImage(3)">3: BEARS.GIF</A></TD></TR>
<TR><TD><A HREF="javascript:setImage(4)">4: OHMY.GIF</A></TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
我

翻阅了这本书，据我所知，我把一切都做对了。提前感谢您的帮助。

JavaScript 主要在 ID 中工作。顶部为您提供主窗口。

向帧和图像标签添加 ID 属性

<frame id="upperFrame" name="upperFrame" >

您还可以按索引访问帧

 top.frames[0].document.  ,,,

阅读 www.w3schools.com 的东西。此外，HTML5中也取消了框架集，因此请考虑学习iframe。

为框架和图像分配 ID，使 ID 与名称相同并尝试类似的东西

 top.frames["upperFrame"].document.getElementById["imageIdNotName"].src = 'new value';
相关文章：