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

墨蓝 2022-07-17 04:27 121阅读 0赞

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

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

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

![这里写图片描述][20160831170254632]

--------------------

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

![这里写图片描述][20160831170853953]

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

在index页面中，iframe\_top的name为topFrame

在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中添加该函数就行了。

在该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了。  
![这里写图片描述][20160831172731618]

[20160831170254632]: /images/20220717/ac833bc5a64f49ad80434175e50fe539.png
[20160831170853953]: /images/20220717/eff79396c0284ce89bf3ab562c660021.png
[20160831172731618]: /images/20220717/2ade73f13f2d4720a9be3759ffa26050.png