个人中心
gpt4 book ai didi

javascript - 使用事件在另一个浏览器选项卡中插入 jQuery 对象

转载 作者：行者123 更新时间：2023-11-28 19:04:46 25 4
gpt4 key购买 nike

我目前正在尝试将 div 复制到另一个浏览器选项卡，并且事件仍然有效。

我找到了在同一选项卡上执行此操作的方法，但无法在不同的选项卡上执行此操作，例如:

https://api.jquery.com/clone/

jQuery: clone elements AND events

这是我的方法:

var newWindow;

if (navigator.userAgent.match(/msie|trident/i))
{
  newWindow = window.open("", "_blank");
}
else
{
  newWindow = window.open("about:blank", "_blank");
}

var currentDate = moment().format(L11n.get(".dateTimeFormat"));

var printDate = L11n.get(".printDate") + " " + currentDate;
var cssUrl = $app.appRoot + "rt/main.css";
var jsUrl = $app.appRoot + "app/main.js";
var d3Url = $app.appRoot + "pub/d3.js";
var title = L11n.get(".contractDetail");
var start = "<!DOCTYPE html> \
  <html xmlns=\"http://www.w3.org/1999/xhtml\" style=\"height: 100%;\"> \
  <head id=\"Head1\"> \
  <title>" + title + "<\/title> \
  <link href=\"" + cssUrl + "\" rel=\"stylesheet\" type=\"text/css\" /> \
  <script src=\"" + jsUrl + "\" language=\"javascript\" type=\"text/javascript\"></script> \
  <script src=\"" + d3Url + "\" language=\"javascript\" type=\"text/javascript\"></script> \
  <script src=\"pub/jquery.js\" language=\"javascript\" type=\"text/javascript\" /></script> \
  <body class=\"detailTabsView limitWidthPrint\" style=\"margin-bottom: 0; margin-top: 0; height: auto;\"> \
  <div class =\"detailPrintHeader\">" + printDate + "</div>\
  <div class =\"detailContainer\">";
var end = "<\/div><\/body><\/html>";

newWindow.document.write(start + detailHtmlString + end);
newWindow.document.close();

//newWindow.document.$("#dashboardFrame").replaceWith($(".ALL #dashboardFrame").clone(true));
var dash = $(".ALL #dashboardFrame").clone(true, true);

$(newWindow).load(function ()
{
  console.log("loaded");
  $(newWindow.document.body).find("#dashboardFrame").replaceWith(dash);
});

$(newWindow.document).ready(function ()
{
  console.log("ready");
});

newWindow.focus();

有趣的部分是:

var dash = $(".ALL #dashboardFrame").clone(true, true);

$(newWindow).load(function ()
{
  console.log("loaded");
  $(newWindow.document.body).find("#dashboardFrame").replaceWith(dash);
});

进一步说明:

我有一个 Web 应用程序，例如，它显示用 D3(数据驱动文档)制作的图表。它还显示其他信息，分为一个选项卡 Pane 。该图表有一些数据点，当用户将鼠标悬停在它们上方时，这些数据点会显示工具提示。

该应用程序还有一个按钮，可在新窗口中打开当前选项卡。工具提示在新窗口上不起作用，但如果能的话那就太好了。

编辑:

简单的例子:

选项卡 A = 源选项卡，其中有一个绑定(bind)了单击事件的按钮。假设该事件读取当前时间并将其写入警报框。

然后我用javascript打开一个新选项卡，我们将其称为选项卡B。加载选项卡B时，我想将选项卡A中的按钮附加到选项卡B的主体中。按钮上的事件仍然必须在选项卡 B。

最佳答案

TL:DR:

You can only solve this by re-binding the events on the new tab in the ready event

我用这段代码尝试过。您必须在该代码段中传递事件处理程序(抱歉，长线示例​​)。只需将片段复制到您的开发控制台中，粘贴并运行它即可。您将收到一个 alert();

var newWindow = window.open('about:blank', '_blank');
newWindow.document.write('<!doctype html><html><head><title>Test</title><script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript">$(document).ready(function() { $(window).load(function(e) { alert(\'onload\'); }); });</script><script type="text/javascript">function onload() {alert("load");}</script></head><body><div>Test</div></body></html>');
newWindow.document.close();

您无法从其他选项卡获取事件。那是浏览器限制。您可以使用 iFrame 来实现此目的。

<小时/>

编辑:正如我所说，您可以使用 iFrame 来检索加载的消息。但它也应该可以在新选项卡中实现。 HTML5中有一个window.postMessage方法。您可以在 caniuse.com 上查看支持哪些浏览器。您还可以简单浏览一下 David Walsh's site 。他解释了如何使用它。

我现在没有资源。但你可以简单地“谷歌”它。或者在开发者控制台中进行测试，以访问 windowB 上 windowA 中声明的变量。结果将是未定义

<小时/>

编辑第 2 部分:我认为在 DOM 中没有脚本资源或内联 JavaScript 是不可能的。

参见示例:

<!doctype html>
<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#test_button').bind('click', function (e) {
                    alert('Button was clicked!');
                    e.preventDefault();
                });

                $(window).load(function (e) {
                    var body = '<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt></head><body id="body">' + $('#test_button').clone(true, true).attr({'id': 'test2_button', 'data-time': new Date()}).wrap("<div />").parent().html() + '</body></html>';
                    console.log(body);
                    var newWindow = window.open('about:blank', '_blank');
                    newWindow.document.write(body);
                    //newWindow.document.write('<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt></head><body>' +  + '</body></html>');
                    newWindow.document.close();
                });
            });
        </script>
    <body>
        <div id="test">
            <button id="test_button">Test-Button</button>
        </div>
    </body>
</html>

我只是将#test_button复制到新窗口中。当打开一个新窗口时，会生成一个新的 DOM，而无需 #test_button 的 JavaScript 事件 (bind)。

如果您附加用于事件处理的 JavaScript，您当然可以将洞内容复制到新选项卡/窗口中。只需将事件绑定(bind)移动到 JavaScript 文件中并附加它，就像我对 jQuery 文件所做的那样。

此外，您只能在现有选项卡中以编程方式打开新选项卡，因为您无法访问其他选项卡资源 (DOM)。

如果您愿意，您也可以传递参数。只需在 open 中添加一个参数即可。查看其他SO-question .

如果它有助于澄清您的问题，请随时将此问题标记为答案。

<小时/>

编辑3

希望这次我做对了!试试这个:

JavaScript 文件(例如 test.js)

$(document).ready(function () {
    console.log('ready');
    $('#test_button').bind('click', function (e) {
        alert('Button was clicked!');
        e.preventDefault();
    });
})

HTML 文件

<!doctype html>
<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="test.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(window).load(function (e) {
                    var body = '<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt><scr' + 'ipt type=\'text/javascript\' src=\'test.js\'></scr' + 'ipt></head><body id="body">' + $('#test_button').clone(true, true).attr({'data-time': new Date()}).wrap("<div />").parent().html() + '</body></html>';
                    console.log(body);
                    var newWindow = window.open('about:blank', '_blank');
                    newWindow.document.write(body);
                    //newWindow.document.write('<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt></head><body>' +  + '</body></html>');
                    newWindow.document.close();
                });
            });
        </script>
    <body>
        <div id="test">
            <button id="test_button">Test-Button</button>
        </div>
    </body>
</html>

关于javascript - 使用事件在另一个浏览器选项卡中插入 jQuery 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31917753/

25 4 0
文章推荐： javascript - 通过匹配文本将 json 数据放入数组中
文章推荐： javascript - JS : Form validation on input type
文章推荐： JavaScript var 位于函数之外
文章推荐： javascript - 将 $(this) 传递给绑定(bind)回调函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com