gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:36:18 28 4
gpt4 key购买 nike

我目前正在尝试创建一个方法来调用浏览器的打印函数来打印页面中嵌入的文档内容。 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 一旦页面加载,但没有什么区别(父页面或打开的页面中都没有错误)。也不存在 Revel框架问题,因为一旦通过调用将数据加载到我的父页面上,我就可以完全控制数据:

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

另一种方法是解析父页面上 root 内的 XML 结构,这样我就不需要打开新页面,但我还能够理解这一点。

任何有关如何在 object 标记内打印 #document 的提示/想法将不胜感激!

已更新

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() 指令,另一个(我们称之为“manipulator()”)包含访问文档对象并使用该数据执行操作的代码。在许多情况下,浏览器不会立即执行 JavaScript 指示它执行的操作;而是执行 JavaScript 指令。它会等待当前正在运行的 JavaScript 函数结束,然后再执行此操作。这意味着您需要一种将第一个函数连接到第二个函数的方法,最简单的方法是通过 setTimeout() 。例如,在调用 window.open() 之后,您可以指定 setTimeout("manipulator();", 250);,然后执行 return 来自第一个函数。

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

关于javascript - 使用 JavaScript 打印 HTML Object 标签的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26496083/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com