用JavaScript打印HTML Object标签的内容 [英] Print contents of HTML Object tag with JavaScript
问题描述
我目前正在尝试创建一个调用浏览器的打印函数的方法来打印我的页面中嵌入的文档内容。已经包含了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_Containerdata =URLtype =image / svg + xml>< / object>
< / body>
现在的问题是，一旦 window.open（URL） code>被调用， $（Popup.document）.load 中的脚本永远不会运行。我曾尝试setTimeOut一旦页面加载，但它没有区别（父母页面或打开的页面中没有错误）。没有交叉框架问题，因为一旦通过调用将数据加载到我的父页面中，我就可以完全控制数据：
var root = document.getElementById（Graph_Container）。contentDocument.querySelector（svg）;
另一种方法是解析 root 在我的父页面上，这样我就不需要打开一个新页面，但我还没有能够围绕这一点来包装我的头。
有关如何在对象中打印 #document 的任何提示/ / code>标签将不胜感激！
更新
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 ）;
}）;
}）;
window.open（ ）函数可以接受另一个参数，一个窗口名称。首先，为当前窗口指定一个名称，例如 window.name =persists; 然后，对于弹出窗口，您可以指定类似于 Popup = window.open（URL，popped）; 这将确保刚刚打开的URL不会替换您正在运行的代码，并且 Popup 变量允许您访问弹出窗口中的任何内容 - 使用 Popup.document 访问文档对象。
我将从下面的评论中添加此内容。将您的代码视为分为两个不同的功能。一个包含 window.open（）指令，另一个--let称它为manipulator（） - 保存代码以访问文档对象并执行该数据。在许多情况下，浏览器不会立即做出JavaScript告诉它做的事情;它在执行之前等待当前正在运行的JavaScript函数结束。这意味着您需要将第一个函数连接到第二个函数的方法，最简单的方法是通过 setTimeout（）。例如，在调用 window.open（）之后，您可以指定 setTimeout（manipulator（）;，250）; ，然后从第一个函数中执行 return 。
$ b manipulator（） 函数之后会被调用1/4秒，但在运行之前，浏览器将执行 window.open（）操作。因此，当操纵器（）函数运行时，您将能够访问刚刚打开的窗口的文档对象，并对这些数据执行操作。 （请注意，这种事情，在不同功能之间划分工作，是全局变量在JavaScript中非常有用的主要原因 - Popup应该是全球范围内的。）
I am currently trying to create a method that calls the browser's print function to print the document content embedded within my page. D3.js and jQuery libraries are included already. 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. 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). 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.
Any tips/ideas on how I can print the #document within the object tag would be greatly appreciated!
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. First, specify a name for your current window, like window.name="persists"; and then, for the popup you could specify something like 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.
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. In many cases a browser doesn't immediately do something that JavaScript tells it to do; it waits for the currently-running JavaScript function to end, before doing it. That means you need a way of connecting the first function to the second, and the simplest way to do that is through setTimeout(). For example right after calling window.open() you could specify setTimeout("manipulator();", 250);, and then do a return from that first function.
The manipulator() function would be called 1/4 second afterward, but before it runs, the browser will have performed the window.open() operation. 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. (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打印HTML Object标签的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
