在页面重新加载后使 onclick 事件保持不变答案

【问题标题】：Make onclick event stick after page reload在页面重新加载后使 onclick 事件保持不变
【发布时间】：2009-07-07 16:16:07
【问题描述】：

我有 Javascript 可以打开另一个窗口并为所有链接注册一个点击处理程序：

//Inside a class somewhere
this.file_browser_window = $(window.open("/filebrowser", "file_browser_window",
        "width=800,height=600"))

Event.observe(this.file_browser_window, 'load', function (){
     //This is the event I am after
     Event.observe(this.file_browser_window, 'click', handle_click_in_browser);
}.bindAsEventListener(this));

// The Handler function
function handle_click_in_browser(evt){
   evt.stop();  

   url = evt.target.href;

   if(url && url.endsWith('.png')){
       console.log("Image clicked");
       //REMMEMBER THIS URL ON MAIN PAGE
       this.close();
   }
   else{
       console.log("Regular stuff clicked", this);
       this.location = url; //<-- THIS is the breaking point
   }
}

但是，当用户单击该弹出窗口中的某个链接时，当页面重新加载时，我的 CLICK 处理程序消失了！

弹出窗口中的链接指向同一个域。

现在，我无法更改弹出窗口中的源代码(html)。我需要捕捉用户点击的链接标签（如果它指向图片）的 href。

如果有人感兴趣，我会在弹出窗口中运行django-filebrowser。

【问题讨论】：

弹窗中的链接是否指向同一个域中的页面？

标签： javascript prototypejs

【解决方案1】：

您可以通过将文件浏览器页面放在 iframe 中的新弹出窗口中来解决此问题。我可能会回来编辑这段代码，但现在这里有一些代码可能会让你开始（可能不会按原样工作——在没有测试的情况下这样做）

== 您从 ============ 启动弹出窗口的页面

// some code to launch the file browser wrapper popup
var file_browser_popup = $(window.open("/new_wrapper_page.html", "file_browser_popup",
                "width=800,height=600"));

== 里面new_wrapper_page.html ============

<html>
<head>
<script type="text/javascript">
// most of your existing code stays the same, but things are moved around

function listenForClicks() {
    var ifrm = $('filebrowser_iframe');
    var content = (ifrm.contentWindow ? ifrm.contentWindow.document : (ifrm.contentDocument ? ifrm.contentDocument : null));
    if (content) {
        //This is the event I am after
        Event.observe(content, 'click', handle_click_in_browser);
    }

}

// The Handler function
function handle_click_in_browser(evt){
   evt.stop();  

   url = evt.target.href;

   if(url && url.endsWith('.png')){
       console.log("Image clicked");
       //REMEMBER THIS URL ON MAIN PAGE
       parent.close();
   }
   else{
       console.log("Regular stuff clicked", this);
       parent.location = url; //<-- THIS is the breaking point
   }
}
</script>
</head>
<body>
<iframe id="filebrowser_iframe" src="/filebrowser/" width="800" height="600" onload="listenForClicks();"/>
</body>
</html>

无论如何，这是可以玩的。如果你需要更多指导，请告诉我——我的原型技能很弱，我只是使用你现有的代码来弄清楚你到底想要做什么......

【讨论】：

当 iframe 中的内容发生变化时会发生什么？点击会重新注册还是我需要手动完成？
当我点击浏览器内的链接时，如何在页面上保留 iframe？一些喜欢：iframe.contentWindow.location = url OR iframe.content = load_from_url(url)...???
好的。所以这有效： $('filebrowser_iframe').src = url;但是表格帖子呢？他们不再使用这个，我不能让他们正常通过，因为他们会摆脱我的 iframe。
该死的，我只是想到文件上传它们不能用 ajax 处理
django 有关于你应该如何使用这个控件的文档吗？

【解决方案2】：

您应该在弹出页面本身内应用弹出页面的点击事件处理程序。我认为没有任何理由让父窗口负责这些事件处理程序。

【讨论】：

因为我正在为我的弹出窗口使用预制的文件浏览器。它自己完成所有工作，我只需要捕获结果。我用它的链接更新问题。
因此，作为一种解决方法，您能否弹出一个包含事件绑定代码的自定义页面，但将文件浏览器部分加载到该自定义页面的 iframe 中？事件绑定代码可以查看 iframe 内的文档，并在每次 iframe 重新加载时附加监听器。
嗯..我可以做到。如果您能将其作为答案提出来，那就太好了。
它是预制的，但你为什么不能修改它以包含一个简单的 javascript 文件？
你说它自己做所有的事情，这显然是不真实的，否则你不必一开始就写这段代码。