在带有事件的另一个浏览器选项卡中插入jQuery对象

Insert jQuery Object in another browser tab with events

本文关键字：插入 jQuery 对象选项浏览器事件另一个更新时间：2023-09-26

我目前正试图将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(数据驱动的文档)制作的图表。它还显示其他信息，拆分到一个选项卡窗格中。该图表有一些数据点，当用户将鼠标悬停在它们上面时显示tooltip。

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

编辑:

简单的例子:

选项卡A = source选项卡，其中有一个按钮，该按钮绑定了一个点击事件。事件读取当前时间，并将其写入警告框。

然后我用javascript打开一个新标签，我们叫它tab B。当加载tab B时，我想把tab a的按钮附加到tab B的主体。按钮上的事件仍然要在tab B中工作。

TL:DR:

的新选项卡上重新绑定事件来解决这个问题准备好活动

我用这段代码尝试了一下。您必须在这段代码中传递事件处理程序(对于长行示例来说)。只需将其复制到dev-console中，粘贴并运行即可。你会得到一个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来检索加载的消息。但它也应该可能在一个新的标签。有一扇窗户。postMessage方法。你可以在caniuse.com上看到支持哪些浏览器。你也可以浏览一下大卫·沃尔什的网站。他解释如何使用它。

我现在没有资源。但你可以简单地"谷歌"一下。或者在开发人员控制台中进行测试，以访问在windowB上的windowwa中声明的变量。结果将是undefined

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

看到的例子:

<!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到新的窗口。当打开一个新窗口时，将生成一个不包含#test_button的JavaScript事件(bind)的新DOM。

如果你为事件处理附加JavaScript，你当然可以将你的漏洞内容复制到一个新的选项卡/窗口中。只需将事件绑定移动到JavaScript文件中，并像我在jquery文件中所做的那样添加它。

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

如果您喜欢，也可以传递参数。只需在open中添加一个参数。参见其他so问题

如果它有助于澄清你的问题，请随意标记这一个作为答案。

编辑3

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

javascript文件(e . g . . 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>