英文:
How to access the HTML of the print window in Chrome?
问题
I want to write code that prints a web page. print() is not enough because it only opens the browser's print window, and does not print immediately. In addition, I am also interested in controlling the printing options (such as printing to PDF or a certain size).
So I opened Chrome's developer tools with the print window open, copied the js path of the save button, and tried to write the following code in a web page I wanted to print:
print()
document.querySelector("body > print-preview-app").shadowRoot.querySelector("#sidebar").shadowRoot.querySelector("print-preview-button-strip").shadowRoot.querySelector("div > cr-button .action-button").click()
I got an error because this element does not appear on the page itself but in the print window. It turns out that the window is actually a separate page (chrome://print/), but in some way it is embedded in the printed page or it appears unrelated to it.
My question is, how can I run JS in such a case on the window?
My question is definitely different from this question. There the question was about a plugin, and the problem was accessing the chrome:// pages because they are like that, and the browser does not allow accessing them. But I'm writing a regular script (not a plugin) and as such it can always access such pages. The problem in my case is that the print window is not part of the website page but is displayed separately.
I will clarify again. The problem I encountered is with accessing the HTML of a page other than the current page. Using a plugin, it should actually be technically possible, but the browsers block it. So the question of how to do this with a plugin is different from the question of how to do it with a regular script.
post Scriptum. 1. Perhaps it is also possible to make direct use of JS through which Chrome prints, but at the moment it is not relevant for me. The question is how to access the HTML elements as above.
- I have seen similar questions (like this one). I didn't see any answers.
英文:
I want to write code that prints a web page. print() is not enough because it only opens the browser's print window, and does not print immediately. In addition, I am also interested in controlling the printing options (such as printing to PDF or a certain size).
So I opened Chrome's developer tools with the print window open, copied the js path of the save button, and tried to write the following code in a web page I wanted to print:
print()
document.querySelector("body > print-preview-app").shadowRoot.querySelector("#sidebar").shadowRoot.querySelector("print-preview-button-strip").shadowRoot.querySelector("div > cr-button .action-button")click()
I got an error because this element does not appear on the page itself but in the print window. It turns out that the window is actually a separate page (chrome://print/), but in some way it is embedded in the printed page or it appears unrelated to it.
My question is, how can I run JS in such a case on the window?
My question is definitely different from this question. There the question was about a plugin, and the problem was accessing the chrome:// pages because they are like that, and the browser does not allow accessing them. But I'm writing a regular script (not a plugin) and as such it can always access such pages. The problem in my case is that the print window is not part of the website page but is displayed separately.
I will clarify again. The problem I encountered is with accessing the HTML of a page other than the current page. Using a plugin, it should actually be technically possible, but the browsers block it. So the question of how to do this with a plugin is different from the question of how to do it with a regular script.
post Scriptum. 1. Perhaps it is also possible to make direct use of JS through which Chrome prints, but at the moment it is not relevant for me. The question is how to access the HTML elements as above.
- I have seen similar questions (like this one). I didn't see any answers.
答案1
得分: 1
I'm sad to tell you that this is impossible.
In the other hand, you can always use an alert JS library (like sweetalert2) and then just edit the inner HTML of the alert div.
First, include the sweetalert2 script in your HTML <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>.
Then, write a function that creates the popup
function showAlert(){
Swal.fire(
'Good job!',
'You clicked the button!',
'success'
)
get the popup element and edit its innerHTML
document.getElementsByClassName("swal2-popup")[0].innerHTML = "Write here your HTML for the popup.";
and end the function
}
英文:
I'm sad to tell you that this is impossible.
In the other hand, you can always use an alert JS library (like sweetalert2) and then just edit the inner HTML of the alert div.
First, include the sweetalert2 script in your HTML <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>.
Then, write a function that creates the popup
function showAlert(){
Swal.fire(
'Good job!',
'You clicked the button!',
'success'
)
get the popup element and edit it's innerHTML
document.getElementsByClassName("swal2-popup")[0].innerHTML = "Write here your HTML for the popup.";
and end the function
`}`
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-js -->
function showAlert(){
Swal.fire(
'Good job!',
'You clicked the button!',
'success'
)
document.getElementsByClassName("swal2-popup")[0].innerHTML = "Hello, this is an alert with a <button onclick='alert()'>button</button>.";
}
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<body>
<p>Hi, this is some inutile text here.
Lorem ipsum dolor sit amet consectetur adipiscing elit praesent, maecenas felis aenean sapien vulputate sed porttitor habitasse auctor, hendrerit eros nibh ligula mollis ornare venenatis. Taciti arcu dapibus aliquam ridiculus nostra posuere velit, facilisi aenean morbi vehicula cursus nullam sapien potenti, tristique pulvinar nulla fames auctor rutrum. Faucibus torquent dui interdum quisque nisi nam maecenas duis, mauris eget class euismod integer curae ultricies, tempor sem felis varius sapien nunc cum.</p><button onclick="showAlert()">SHOW ALERT</button>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论