如何使用 Javascript 弹出一个新窗口,其 html 与其父窗口几乎相同

发布于 2024-08-26 10:09:08 字数 144 浏览 2 评论 0原文

我想从单个页面创建多个版本的适合打印的页面。我正在考虑这样做:在原始页面上放置几个按钮,然后单击一个按钮将弹出一个新窗口,其html与其父窗口相同,但进行了一些修改(例如,将某些DIV的显示属性设置为没有任何)。

可以使用javascript来做到这一点吗?

I want to create multiple versions of print-friendly pages from a single page. I am considering to do it in this way: placing several buttons on the original page and, clicking one button will popup a new window with the same html as its parent window, but with some modifications (e.g., set display attribute of some DIV's to none).

It is possible to use javascript to do this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

無心 2024-09-02 10:09:08

您可以将附加参数传递给当前页面的 url 并在新窗口中打开它,如下所示:

window.open(document.location.href + "?print=true");

然后您可以在 JavaScript 中读取 URL 参数并进行必要的隐藏和 CSS 更改以使文档打印友好。

说到这里:为什么不使用仅打印的 CSS 来为您做到这一点呢?那么你需要在代码中做的就是:

window.print();

在你的文档 HEAD 中:

<link rel="stylesheet" href="yourcssfile.css" media="print" /> 

CSS 将确保页面在打印时看起来像你想要的那样。有关 CSS 中打印的更多信息,请参阅本文

You could pass an additional parameter to the current page's url and open it in a new window, like this:

window.open(document.location.href + "?print=true");

You can then read the URL parameter in JavaScript and do the necessary hiding and CSS alterations to make the document print friendly.

Speaking of which: Why not use a print-only CSS that does this for you? Then all you need to do in your code is:

window.print();

And in your document HEAD:

<link rel="stylesheet" href="yourcssfile.css" media="print" /> 

And the CSS will make sure the page looks the way you want to in print. See this article for more about printing in CSS.

戏蝶舞 2024-09-02 10:09:08

是的,可以为此设置 javascript 代码,例如:

window.open('myPage.html')

getElementById('<someid>').style.display = none

但是,您可能需要研究 CSS 打印样式表,它允许使用 CSS 来指定 div 隐藏等。它的优点是不强迫用户打开弹出窗口,也不会在服务器上进行第二次页面加载。我发现这篇文章是一个很好的起点。

基本上,要添加打印样式表,您需要设置如下链接:

<link rel="stylesheet" type="text/css" media="print" href="myPrintStyles.css"/>

Yes, it's possible to setup javascript code to to this, something like:

window.open('myPage.html')

getElementById('<someid>').style.display = none

However, you may want to look into CSS print stylesheets, which allow to use CSS to specify the div hidings and whatnot. It has the advantage of not forcing the user to open a pop-up window and not taking the second page-load hit on your server. I found this article to be a good place to get started.

Basically, to add a print stylesheet you setup a link like this:

<link rel="stylesheet" type="text/css" media="print" href="myPrintStyles.css"/>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文