在页面导航中传播开启变量的最佳方法？ [英] Best way to propagate opener variable across page navigation?

问题描述

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

Application that I'm working on has multiple modules. Two are of a concern - main module and module that I write. And I have to call a function on window that contains main module and the problem is that I have to call that function not from page that is opened by parent webmodule, but from page to which user navigates from this page.

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

Basically first page presents just some query forms, lets user to make some query, and second holds query results, and I am supposed to update contents of parent page based on these results.

导航就像那样

• 主模块


• 我模块的第一页（我将主模块页面作为 window.opener 变量。


• 我的第二页模块（我希望能够在第一个打开的同一浏览器窗口中打开此页面）

• Main module
• First page of my module (i have main module page as an window.opener variable.
• Second page of my module (and I would like to be able to open this page in the same browser window that the first one is opened)

我希望尽可能免费导航 - 比如在新标签页中打开查询结果，返回更改查询参数，进行新查询等。我还想在显示结果的页面上显示用户查询表单并让他们对此进行优化查询，仍然可以更新主模块。

And I would like to have as free navigation as possible - like opening query results in new tab, going back changing query parameters, making new query, etc. I would also like to present user query forms on page that displays results and let them to refine this query, and still be able to update main module.

我在考虑以下解决方案：

I was thinking of following solutions:

1. 使用AJAX将查询结果加载到第一个窗口，但我希望这个应用程序尽可能简单，而且AJAX并不简单;）


2. 生成新窗口每个请求和执行代码，如 var mainModule = opener.m ainModule 。哪个是邪恶的。


3. 将查询结果嵌入到框架或iframe中，但我对如何将主模块窗口javascript变量注入框架或iframe有一点点了解。

1. Using AJAX to load query results to first window, but I would like to have this app as simple as possible, and AJAX is not simple ;)
2. Spawning new window on every request and doing code like var mainModule = opener.mainModule. Which is evil.
3. Embedding query results in a frame or iframe, but I havn'e got the slightest idea on how to inject main module window javascript variable into frame or iframe.

推荐答案

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

If being able to navigate in tabs is a requirement, I think you'd have to nix the idea of using a JavaScript opened window system. Because the opener property is definitely lost in Firefox, Safari, and most browsers, when you navigate to a different window. A new tab disturbs the neat sandbox.

根据您的评论，不是必需的，我认为您可以使用以下3种方法之一：

Not being a requirement, per your comment, I think you can use either of 3 methods:

• 亲子 窗口通讯 - 接下来我将占用
  ;


• XMLHTTP请求 （a.k.a.
  AJAX）;或


• iFrames （旧方式
  远程服务器：）

• Parent-Child window communication-- which I will take up next;
• XMLHTTP Requests (a.k.a. AJAX); or
• iFrames (the old way to remote to the server :)

我会在这里采取 父子沟通 角度，因为你似乎最熟悉它。

I'll take the Parent child communication angle, here, since you seem to be most comfortable with it.

1. 儿童窗口中的导航很容易。
   
   
   
   
   • 页面上的任何链接都会加载到子项中并共享相同的开启者。
   
   
   • 父级可以重新加载一个不同的页面，它共享相同的开场白。
   
   

我已经更新（不完全）一篇文章我多年前写过，让你玩窗户，并实际做一个最小的表单提交。通讯警报相当冗长;但是你将毫不怀疑谁在向谁传达信息。第一个孩子烦恼地打开了。但是页面上有一个链接可以将子项更改为服务器生成的表单。

I've updated (not completely) an article I wrote years ago, to let you play around with the windows and to actually do a minimal form submission. The communication alerts are rather verbose; but you will have no doubt as to who is communicating what to whom. The first child is annoyingly opened onload. But there is a link on the page to change the child to a server-generated form.

JavaScript：超越父子窗口

示例代码SNIPPETS：

EXAMPLE CODE SNIPPETS:

链接 ：

A Link:

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

链接监听器 ：

Link Listener:

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

The event listener and target property are set up in the head of the document, in JavaScript that executes onload:

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);

儿童文件 - 家长监听 ：

Child Document - Parent Listener:

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

儿童文件 - 与父母交谈 ：

Child Document - Talk to Parent:

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

父文档 - 儿童监听器 ：

Parent Document - Child Listener:

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!");
}

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

These are simplistic. But you can see opener continuity, navigation, and communication between server-side postbacks and the Parent at the link provided above.

再次的缺点是打开其中的任何一个另一个选项卡将失去与父级的连接。在我发给你的页面上试一试。我相信孩子会提醒您它已与 开启者 断开连接。

Again the downside is that opening any of these in another tab will lose the connection to the parent. Try it over on the page that I sent you to. I believe the child is set to alert you that it is disconnected from its "opener".

随意提问，jb。

这篇关于在页面导航中传播开启变量的最佳方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！