[Html&JS] 一个网页上,不同的子父窗口iframe之间如何相互调用

本文介绍了一种在多级IFrame嵌套的网页中实现帮助文档精准跳转的方法。通过在不同页面设置对应的帮助文档ID,并利用JavaScript更新顶部IFrame内的帮助按钮URL,实现了点击帮助按钮直接跳转至帮助页面的相关部分。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近有个需求是,如图。有一个Help的网页,用户在不同的页面时候,点击? button。此时跳转到help页面的当前页的帮助文档。
Like:当前页面LED,点击上方的?按钮,跳转到help页面的LED处。

其实在help页面处添加一个ID

<a name='LED' id="LEDID"></a>

?按钮的url修改为即可。
help.htm#LEDID

这里写图片描述


但是问题是这套代码是用的三个ifrme构成。如图:

这里写图片描述

现在的思路就是每次用户点击menu栏,更新mian里面的内容。再在main里面修改iframe_top里面的?按钮的url的链接即可。

在index页面中,iframe_top的name为topFrame

<div>
    <iframe name="topFrame" src="setup_top.htm"></iframe>
</div>

在iframe_main中,window.parent.frames["topFrame"]
可以先获取iframe_main的父窗体。然后再取父窗体的frames[“topFrame”],即iframe_top

就可以更新?的url链接。此时在点击?即可跳转到help页面的LEDID的内容了。
如下:

window.parent.frames["topFrame"].document.getElementById("HelpBtId").href = 'help.htm#LEDID';

ps:因为很多页面总不能都每个页面都添加吧。发现所有页面都添加了global.js,并且每个页面都有一init的函数。所有在js里面添加一个函数,然后再每个网页的init中添加该函数就行了。

<script language="javascript" src="js/global.js"></script>

在该js添加一个函数

/*
    Set the link to the Help button, Different pages for different HelpUrl.For different Help content.
    reSet the topFrame(setup_top.htm / <a href='help.htm' id=HelpBtId>) Help button url.
    helpurl var like:LEDID,SystemLogID.(LEDID define in help.htm)  reSetHelpUrl(LEDID)  
*/
function reSetHelpUrl(helpurl)
{
    if(helpurl != "")
    {
        var setHelpUrl = "help.htm#" + helpurl; //help.htm#LEDID
        window.parent.frames["topFrame"].document.getElementById("HelpBtId").href = setHelpUrl;
    }
    else
    {
        return;
    }

}

init中调用为:

reSetHelpUrl("LEDID");

不同的页面只需修改函数参数就ok了。
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值