简体   繁体   English

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

[英]Print contents of HTML Object tag with JavaScript

I am currently trying to create a method that calls the browser's print function to print the document content embedded within my page. 我目前正在尝试创建一种方法,该方法调用浏览器的打印功能来打印页面中嵌入的document内容。 D3.js and jQuery libraries are included already. D3.js和jQuery库已经包含在内。 The process why which I hope to achieve this is as follows: 我希望实现这一目标的过程如下:

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

The issue right now is that once window.open(URL) is called, the script within $(Popup.document).load is never run. 现在的问题是,一旦调用window.open(URL) ,就永远不会运行$(Popup.document).load的脚本。 I have tried setTimeOut for once the page does load but it's made no difference (no errors in either parent page or opened page). 一旦页面加载成功,我就尝试过setTimeOut,但是没有区别(父页面或打开的页面中没有错误)。 There is no cross framing issues either as I am able to have full control of the data once it has been loaded onto my parent page by calling: 也没有交叉框架问题,因为一旦将数据加载到父页面上,我就可以完全控制数据:

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

An alternative would be to parse the XML structure within root on my parent page so that I wouldn't need to open a new page but I have yet been able to wrap my head around that. 一种替代方法是在父页面的root内解析XML结构,这样就无需打开新页面,但是我仍然可以解决这个问题。

Any tips/ideas on how I can print the #document within the object tag would be greatly appreciated! 我将如何在object标签中打印#document任何提示/想法将不胜感激!

Updated 更新

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

The window.open() function can take another parameter, a window name. window.open()函数可以采用另一个参数,即窗口名称。 First, specify a name for your current window, like window.name="persists"; 首先,为您当前的窗口指定一个名称,例如window.name="persists"; and then, for the popup you could specify something like Popup=window.open(URL, "popped"); 然后,对于弹出窗口,您可以指定类似Popup=window.open(URL, "popped"); This will ensure that the just-opened URL doesn't replace the code you are running, and the Popup variable gives you access to anything you want in that popped window --use Popup.document to access the document object, for example. 这将确保刚打开的URL不会替换您正在运行的代码,并且Popup变量使您可以访问该弹出窗口中Popup.document任何内容- Popup.document ,使用Popup.document访问文档对象。

I'm going to add this from a comment I made below. 我将从下面的评论中添加此内容。 Think of your code as being divided into two different functions. 可以将您的代码分为两个不同的功能。 One holds the window.open() instruction, and the other --let's call it "manipulator()"-- holds the code to access the document object and do things with that data. 一个保存着window.open()指令,另一个保存着我们称之为“ manipulator()”的代码,该代码保存了访问文档对象并对该数据进行处理的代码。 In many cases a browser doesn't immediately do something that JavaScript tells it to do; 在许多情况下,浏览器不会立即执行JavaScript所指示的操作; it waits for the currently-running JavaScript function to end, before doing it. 在执行之前,它会等待当前运行的JavaScript函数结束。 That means you need a way of connecting the first function to the second, and the simplest way to do that is through setTimeout() . 这意味着您需要一种将第一个函数连接到第二个函数的方法,最简单的方法是通过setTimeout() For example right after calling window.open() you could specify setTimeout("manipulator();", 250); 例如,在调用window.open()您可以指定setTimeout("manipulator();", 250); , and then do a return from that first function. ,然后从第一个函数return

The manipulator() function would be called 1/4 second afterward, but before it runs, the browser will have performed the window.open() operation. 之后将调用manipulator()函数1/4秒,但在运行之前,浏览器将执行window.open()操作。 So, when the manipulator() function runs, inside it you will be able to access the document object of the just-opened window, and do things with that data. 因此,当manipulator()函数运行时,您将可以在其中访问刚刚打开的窗口的文档对象,并对这些数据进行处理。 (Do note that this sort of thing, dividing work between different functions, is a major reason why global variables are extremely useful in JavaScript --"Popup" should be a global here.) (请注意,这种在不同功能之间划分工作的事情是为什么全局变量在JavaScript中非常有用的主要原因-“ Popup”在这里应该是全局的。)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM