javascript - 跨页面导航传播开启变量的最佳方式？

Question

我正在处理的应用程序有多个模块。有两个值得关注 - 主模块和我编写的模块。而且我必须在包含主模块的窗口上调用一个函数，问题是我必须不是从父 web 模块打开的页面调用该函数，而是从用户从该页面导航到的页面调用该函数。

基本上第一页只显示一些查询表单，让用户进行一些查询，第二页保存查询结果，我应该根据这些结果更新父页面的内容。

导航就是这样

• 主模块
• 我模块的第一页(我将主模块页面作为 window.opener 变量。
• 我的模块的第二页(我希望能够在打开第一个页面的同一浏览器窗口中打开此页面)

而且我希望尽可能自由地导航——比如在新选项卡中打开查询结果、返回更改查询参数、进行新查询等。我还想在显示结果的页面上呈现用户查询表单和让他们改进这个查询，并且仍然能够更新主模块。

我在考虑以下解决方案:

1. 使用 AJAX 将查询结果加载到第一个窗口，但我希望这个应用程序尽可能简单，而 AJAX 并不简单；)
2. 根据每个请求生成新窗口并执行类似 var mainModule = opener.mainModule 的代码。这是邪恶的。
3. 在框架或 iframe 中嵌入查询结果，但我对如何将主模块窗口 javascript 变量注入(inject)框架或 iframe 一无所知。

Answer 1

如果能够在选项卡中导航是一项要求，我认为您必须放弃使用 JavaScript 打开的窗口系统的想法。因为 opener 属性在 Firefox、Safari 和大多数浏览器中肯定会丢失，当您导航到不同的窗口时。新标签页打乱了整洁的沙箱。

不是必需的，根据您的评论，我认为您可以使用 3 种方法中的任何一种:

• Parent-Child 窗口通信 -- 我将着手处理下一个;
• XMLHTTP 请求(又名 Ajax )；或
• iFrame(旧方法远程到服务器:)

在这里，我将从亲子沟通的 Angular 出发，因为您似乎对它最满意。

1. “子”窗口中的交互导航很简单。
   • 页面上的任何链接都会加载到子级中并共享相同的“开启者”。
   • 父级可以重新加载不同的页面并且它共享相同的打开器。
2. child 身上会有一个parent-listener函数；
3. child 将有单独的功能与 parent 交谈。
4. parent 将拥有一个或多个子听众，具体取决于如何通用或特定您的需求。

我已经更新(不完全)我多年前写的一篇文章，让您可以玩转窗口并实际提交最少的表单。通信警报相当冗长；但您不会怀疑谁在向谁传达什么。第一个 child 烦人地打开onload。但是页面上有一个链接可以将子项更改为服务器生成的表单。

JavaScript: Beyond Parent Child Windows

---

示例代码片段:

链接:

<a href="page1.html" id="newwinlink">open a window from link</a>

链接监听器:

事件监听器和目标属性设置在文档的头部，在执行onload的JavaScript中:

var mywin; //global variable for best results

//XDOM - normalizes browser differences:
var openingLink = XDOM.getElementById('newwinlink');
openingLink.target = "newWin"; //important!

XDOM.addListener(openingLink, 'click', function(e){mywin=window.open('','newWin','width=400,height=400,resizable,scrollbars');if (!mywin.opener){mywin.opener = self;}return true}, false);

子文档 - 父监听器:

function parentListener(pmsg) 
{
    alert("I'm the child, and I just received the following message from my parent:\n\n" + pmsg); 
}

child 文档 - 与家长交谈:

function talktoParent() 
{
    if (self.opener!=null) {
        opener.childListener("Hi from child window!");
    } else {
        alert("no opener... sorry, can't talk now");
    }
}

父文档 - 子监听器:

function childListener(cmsg) 
{
    alert("I'm the parent. Just received the following message from my child:\n\n" + cmsg);
    //send back a message to the child, mywin...
    mywin.parentListener("Hi, back, from parent window!");
}

这些很简单。但是您可以在上面提供的链接中看到服务器端回发和父级之间的开启连续性、导航和通信。

缺点是在另一个选项卡中打开其中任何一个都会失去与父级的连接。在我发送给您的页面上重试。我相信 child 会提醒您它已与其“opener”断开连接。

请随时提问，jb。