window.open（）在浏览器iframe中被阻止

发布于 2025-02-09 15:45:01 字数 4177 浏览 0 评论 0原文

我们有一个Angular 13应用程序，该应用程序正在 iframe 中进行测试，该应用程序在另一个应用程序中 host 。

但是，我们的Web应用程序中有一些功能无法正常工作。一个是我们的打印例程，它使用window.open（）。

例如，单击此打印图标：

打开JavaScript窗口，用户最终可以选择“ print”

我们的typescript Component中的打印例程看起来像这样（前30多行只是设置了一堆var）：

printAll(...) {

   ... // JUST SET A BUNCH OF VARIABLES ..

   const html = `
        <!DOCTYPE html>
        <head>
            <meta charset="utf-8">
            <link href="assets/dependencies/print/print.css" rel="stylesheet"/>
            <script>
                function showHeader(ele) {
                    const headers = document.getElementsByClassName("rept-header");
                    if (ele.checked) {
                        for (const header of headers) {
                            header.classList.remove("no-display");
                        }
                    } else {
                        for (const header of headers) {
                            header.classList.add("no-display");
                        }
                    }
                }
                function showFooter(ele) {
                    const footers = document.getElementsByClassName("rept-footer");
                    if (ele.checked) {
                        for (const footer of footers) {
                            footer.classList.remove("no-display");
                        }
                    } else {
                        for (const footer of footers) {
                            footer.classList.add("no-display");
                        }
                    }
                }
            </script>
        </head>
        <body>
            <section id="print-menu" class="no-print">
                <div>
                    <button onclick="window.print()" class="primary-button">Print</button>
                    <button onclick="window.close()" class="secondary-button">Cancel</button>
                </div>
                ${this.printHeaderHtml}
            </section>
            <section id="articles">
                ${images.join("<div class='print-break'></div>")}
            </section>
        </body>
        `;

        const features = [
            'status=0',
            'resizable=1',
            'scrollbars=0',
            'toolbar=0',
            'left=50',
            'top=50',
            `height=${screen.availHeight - 200}`,
            `width=${screen.availWidth - 200}`,
        ];

        const printPreviewWindow = window.open('', 'PrintPreview', features.join(','));
        printPreviewWindow.document.write(html);
        printPreviewWindow.document.close();
        printPreviewWindow.focus();
    }

因此，可以解决这个 window.open（）阻止问题吗？

我看过一个博客，其中两个 iframes 被用于彼此交流，但仍然不确定该技术是否会解决此window.open（）阻止问题。 ie https://dev.to/damcosset/iframes-and-communicating -betweew-applications-31K5

控制台错误，一旦用户单击“打印”选项

和 iframe下的文档元素：

原文

We have an Angular 13 app which is being tested within an iframe that is hosted in another application.

There are a few functions in our web app that DO NOT work, however. One is our printing routine which uses window.open() .

For example, clicking on this print icon:

opens a javascript window where the user can finally choose "Print"

The print routine in our TypeScript component looks like this (the first 30+ lines just set a bunch of vars):

printAll(...) {

   ... // JUST SET A BUNCH OF VARIABLES ..

   const html = `
        <!DOCTYPE html>
        <head>
            <meta charset="utf-8">
            <link href="assets/dependencies/print/print.css" rel="stylesheet"/>
            <script>
                function showHeader(ele) {
                    const headers = document.getElementsByClassName("rept-header");
                    if (ele.checked) {
                        for (const header of headers) {
                            header.classList.remove("no-display");
                        }
                    } else {
                        for (const header of headers) {
                            header.classList.add("no-display");
                        }
                    }
                }
                function showFooter(ele) {
                    const footers = document.getElementsByClassName("rept-footer");
                    if (ele.checked) {
                        for (const footer of footers) {
                            footer.classList.remove("no-display");
                        }
                    } else {
                        for (const footer of footers) {
                            footer.classList.add("no-display");
                        }
                    }
                }
            </script>
        </head>
        <body>
            <section id="print-menu" class="no-print">
                <div>
                    <button onclick="window.print()" class="primary-button">Print</button>
                    <button onclick="window.close()" class="secondary-button">Cancel</button>
                </div>
                ${this.printHeaderHtml}
            </section>
            <section id="articles">
                ${images.join("<div class='print-break'></div>")}
            </section>
        </body>
        `;

        const features = [
            'status=0',
            'resizable=1',
            'scrollbars=0',
            'toolbar=0',
            'left=50',
            'top=50',
            `height=${screen.availHeight - 200}`,
            `width=${screen.availWidth - 200}`,
        ];

        const printPreviewWindow = window.open('', 'PrintPreview', features.join(','));
        printPreviewWindow.document.write(html);
        printPreviewWindow.document.close();
        printPreviewWindow.focus();
    }

So it possible to get around this window.open() blocking issue?

I've seen a blog where two iframes are being used to communicate with each other, but still not sure if that technique would solve this window.open() blocking issue. i.e. https://dev.to/damcosset/iframes-and-communicating-between-applications-31k5

Console Error, once the user clicks on Print option

And the document elements under the iframe:

分享到QQ

分享到微博

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

发布评论

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

罪歌 2025-02-16 15:45:01

处理以下代码，现在我可以看到我的新iframe到身体的底部。
我可以暂时隐藏我的元素，直到用户完成打印。然后再次显示顶部。

const iframetest = document.createElement('iframe');
document.body.appendChild(iframetest);
iframetest.setAttribute("style","height:100%;width:100%;");
iframetest.contentWindow.document.open();
iframetest.contentWindow.document.write(html);
iframetest.contentWindow.document.close();

Working with the following code, and now I can see my new iframe to the bottom of body.
I can hide my element temporarily UNTIL the user is done printing. Then show the top again.

const iframetest = document.createElement('iframe');
document.body.appendChild(iframetest);
iframetest.setAttribute("style","height:100%;width:100%;");
iframetest.contentWindow.document.open();
iframetest.contentWindow.document.write(html);
iframetest.contentWindow.document.close();