Проблема с функциями JavaScript window.open() и window.close()
Я пытаюсь использовать JavaScript, чтобы открыть и закрыть новое окно в моем веб-приложении. Открывающая часть работает нормально, но у меня возникли проблемы с закрытием окна с помощью window.close().
Вот мой код:
let myWindow;
//select dom element
const width = document.getElementById('width');
const height = document.getElementById('height');
//show window object properties
width.innerHTML = "Window inner with is: " + window.innerWidth;
height.innerHTML = "Window inner height is: " + window.innerHeight;
function openWindow() {
myWindow = window.open('https://www.google.com')
}
function closeWindow() {
myWindow.close();
}<div>
<input type = "button" value = "Open window" onclick = "openWindow()" />
</div>
<div>
<input type = "button" value = "close window" onclick = "closeWindow()" />
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это вызвано особым HTTP-заголовком безопасности, называемым Cross-Origin-Opener-Policy.
Веб-сайты могут указать этот заголовок, чтобы запретить действия, выполняемые пользователем, открывающим страницу (в данном случае вашей страницей), особенно если она является междоменной.
В частности, для Google они указали same-origin-allow-popups; report-to = "gws" в этом заголовке, поэтому вы не можете выполнить какое-либо действие, поскольку оно не находится в той же группе контекста просмотра.
Для веб-сайтов без этого HTTP-заголовка по умолчанию разрешено. Например, вы можете попробовать использовать https://example.com, и это должно сработать.
Вот переработанный метод для достижения желаемой функциональности, хотя и во «всплывающем» окне:
let myWindow;
const width = document.getElementById('width');
const height = document.getElementById('height');
if (width && height) {
width.innerHTML = "Window inner width is: " + window.innerWidth;
height.innerHTML = "Window inner height is: " + window.innerHeight;
}
function openWindow() {
myWindow = window.open('http://example.com', '', 'width=800,height=600');
}
function closeWindow() {
if (myWindow && !myWindow.closed) {
myWindow.close();
}
}
Да, он работает в новом окне, а не в новой вкладке. Спасибо
.innerHTML имеет последствия для безопасности и производительности. Поскольку текст, который вы устанавливаете, не содержит HTML, .innerHTML следует заменить на .textContent.
Судя по коду, я предполагаю, что этот человек только начинает изучать веб-разработку. Вот почему я дал самый простой ответ, который выполняет то, что они просили.
@PritamGhosh, если мое решение помогло вам в обучении, отметьте мой ответ как ответ.
Спасибо вам обоим за ваши идеи и предложения! Я действительно новичок в веб-разработке, и ваши объяснения помогают мне понять последствия использования .innerHTML по сравнению с .textContent. Скотт, я ценю, что вы указали на проблемы безопасности и производительности, связанные с .innerHTML, и я обязательно буду использовать .textContent, когда это будет уместно.
Привет @Yogi, это хорошее наблюдение. При открытии пока не отправляются никакие запросы на сервер, поэтому невозможно узнать, какова политика безопасности для конкретного веб-сайта. Если вы вызовете API, чтобы очень быстро закрыть окно сразу после открытия (например,
setTimeout(() => window.close(), 10)), оно все равно успешно закроется. Ограничение применяется только в том случае, если окно успешно загрузило документ/веб-страницу, у которой установлен этот HTTP-заголовок, включающий навигацию.