javascript - 初学者 JavaScript/HTML 框架通信

标签 javascript html communication frames

我的 Web 设计类(class)的作业之一是创建一个页面,其中两个框架使用 JavaScript 进行通信。下部框架 (lower2.html) 上有四个链接,单击时,它们应该将上部框架 (upper1.html) 中的图像更改为相应的图像,但没有。这是我拥有的:

文件名:js-seventeen.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>

文件名:lower2.html。这是包含应更改图像但未更改图像的链接的下部框架。无论我点击什么,它都会保留在默认的 lions.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。 top 为您提供主窗口。

为框架和图片标签添加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';

关于javascript - 初学者 JavaScript/HTML 框架通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18817902/

相关文章:

ios - Swift - 需要不同网络上的手机之间进行通信的应用程序

python - 使用 Python 多处理进行通信时 OSX 和 Linux 之间的性能差异

javascript - 列出 Google map 屏幕上的标记

javascript - 事件委托(delegate) - 无法更改按钮类别和值

html - Jekyll 自动目录

html - 如何在页面加载时滚动到页面中间?

javascript - 检查 d3 函数的参数值

javascript - fade_in fade_out 调用另一个页面

javascript - 如何使用用户控制的切换(启用/禁用)在 iOS 设备(iPad、iPhone、Mac)上禁用滚动/滚动

javascript - 使用 JavaScript 在窗口/选项卡之间进行通信