Question

我目前正在尝试创建一种方法，该方法调用浏览器的打印功能来打印嵌入在页面中的document内容。已经包含了D3.js和jQuery库。我希望实现这一目标的过程如下：

<head>
  <script type="text/javascript">
   var floatButton = d3.select("body").append("div")
        .attr("class", "printbutton")

   $(".printbutton").click(function() {
        var Popup = window.open(URL);
        $(Popup.document).load(function() {
            document.getElementsByTagName('svg')[0].style.opacity = 1;
            window.print();
            window.close();
        });
    });
  </script>
</head>

<body>
  <object id="Graph_Container" data="URL" type="image/svg+xml"></object>
</body>

现在的问题是，一旦调用window.open(URL)，$(Popup.document).load中的脚本就永远不会运行。我已经尝试过setTimeOut，一旦页面加载但它没有区别（父页面或打开的页面都没有错误）。没有交叉框架问题，因为我可以通过调用将数据加载到父页面后完全控制数据：

var root = document.getElementById("Graph_Container").contentDocument.querySelector("svg");

另一种方法是在我的父页面上解析root内的XML结构，这样我就不需要打开一个新页面了，但我还是能够解决这个问题。

有关如何在#document代码中打印object的任何提示/想法，我们将不胜感激！

更新

window.name = "PersistWindow";
$(".printbutton").click(function() {
    debugger;
    Popup = window.open(URL, "TempWindow");
    $(Popup.document).load(function() {
        Popup.document.getElementsByTagName('svg')[0].style.opacity = 1;
        window.print();
        window.close();
    });
});

Answer 1

window.open()函数可以使用另一个参数，一个窗口名称。首先，为当前窗口指定一个名称，例如window.name="persists";然后，对于弹出窗口，您可以指定类似Popup=window.open(URL, "popped");的名称。这将确保刚刚打开的URL不会替换您的代码正在运行，Popup变量使您可以访问该弹出窗口中的任何内容 - 例如，使用Popup.document来访问文档对象。

我将在下面发表的评论中添加此内容。将您的代码视为分为两个不同的功能。一个持有window.open()指令，另一个持有 - ＆＃34;操纵器（）＆＃34; - 保存代码以访问文档对象并使用该数据执行操作。在许多情况下，浏览器不会立即执行JavaScript告诉它要做的事情;在执行之前，它等待当前运行的JavaScript函数结束。这意味着你需要一种方法将第一个函数连接到第二个函数，最简单的方法是通过setTimeout()。例如，在调用window.open()之后，您可以指定setTimeout("manipulator();", 250);，然后从第一个函数执行return。

manipulator()函数将在1/4秒后调用，但在运行之前，浏览器将执行window.open()操作。因此，当manipulator()函数运行时，在其中，您将能够访问刚刚打开的窗口的文档对象，并使用该数据执行操作。（请注意，在不同函数之间划分工作的这种事情是全局变量在JavaScript中非常有用的一个主要原因 - ＆＃34; Popup＆＃34;应该是全局变量。）

使用JavaScript打印HTML Object标记的内容

1 个答案: