What could be the reason that the close() method is not successfully closing the window that I have generated?

Although there are no error messages, I am encountering an issue where the function windowClose() does not execute when I click on the 'close window' button. Why could this be happening?

Take a look at my code below:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="open window" onclick="windowOpen()">
    <input type="button" value="close window" onclick="windowClose()">
    <script src="window.js"></script>
</body>
</html>

JS

let myWindow;

function windowOpen(){
    myWindow = window.open("https://google.com", "_blank");
}

function windowClose(){
    myWindow.close();
}    

I had anticipated that clicking on the 'close window' button would result in the new window closing as expected.

Answer №1

Your code is designed to work in most cases. However, it may encounter issues with websites like www.google.com, which have a stricter cross-origin opener policy.

Specifically, these sites send the following header:

Cross-origin-owner-policy: same-origin-allow-popups

According to the specification:

This will result in the creation of a new top-level browsing context for the document, unless its predecessor specified the same cross-origin opener policy and they are from the same origin.

Since the content is loaded in a different browsing context, the window cannot be closed from the original page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for retrieving the entire row data based on the maximum value in a column?

function findMaxValue() { var highestValue = Math.max.apply(Math, $('.sira').map(function() { return $(this).text() })) alert(highestValue); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"& ...

The efficiency of XSL Template is significantly impacting loading time

Hello there, I am facing a challenge with my webpage's loading speed due to the code provided below. Can you assist me in optimizing it? <xsl:template match="Category" mode="CategorySelectorScript"> <xsl:variable name="ThisCateg ...

Passing Variables from Node JS to Pug Template's HTML and JavaScript Sections

Here is a route that sends various variables to a Pug template: items.js route router.get('/edit/:itemObjectId', async function(req, res, next) { var itemObjectId = req.params.itemObjectId; var equipmentCategoryArr = []; var lifeExp ...

The setTimeout function interrupts the event loop

Recently, I came across conflicting information regarding the usage of setTimeout to create nonblocking/asynchronous functions. One article suggested that using setTimeout is essential for this purpose, while another claimed that it actually blocks the eve ...

What is the best way to remove a particular element from an array stored in Local Storage?

Currently working on a web application that features a grade calculator allowing users to add and delete grades, all saved in local storage. However, encountering an issue where attempting to delete a specific grade ends up removing the most recently add ...

How can I create a React component that is accessible and controllable from external sources?

Attempting to create a Dialog component using React and Material-UI. Currently, the component behaves like a traditional Material-UI dialog with a button inside the class that opens the dialog. However, I aim to achieve the same behavior as the default Ma ...

Is there a way to detect in the browser when headphones have been unplugged?

Is there an event to pause the video when the audio device changes, like if headphones get unplugged? I've looked into other questions, but they don't seem to be for browser. Detecting headphone status in C# Detecting when headphones are plugg ...

What could be causing my component to fail to load properly with Vite?

I have been working on a React project using Vite. Following a tutorial I discovered in an article at https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite, I encountered an issue. Despite following the tutorial step by ...

Unable to display socket data in Angular js Table using ng-repeat

div(ng-controller="dashController") nav.navbar.navbar-expand-sm.navbar-dark.fixed-top .container img(src='../images/Dashboard.png', alt='logo', width='180px') ul.navbar-nav li.nav-item ...

Switch div and expand/shrink the rest

Apologies for what might seem like a trivial question, but after working for a few hours now, I'm finding it difficult to wrap my head around this. My initial instinct is to handle this by manipulating the entire div structure with JavaScript, but I c ...

Which JQuery plugins can transform regular <select> dropdowns into more stylish options?

After an extensive search, I was only able to locate one solution at this link. I scoured the entire internet for alternatives. ...

Is it more effective to specify the class within the selector when using jQuery to remove a class?

Does including the class in the selector when removing a class using jQuery have any impact on performance or best practices? I'm curious if there will be any noticeable difference. For example, do you include it like this: $('#myList li.classT ...

displaying selected value on change in JSP

<html> <head> <title>Displaying HTML Request Parameters</title> </head> <body> <h3>Select an option:</h3> <form method="get"> <input type="text" name="usrname"><br> <select ...

Retrieve the outcome of a mongoose query within a designated function

Seeking help with returning a result from my mongoose find operation. While similar questions have been asked before, this one is unique. Here's an example of my user: let UserSchema = new mongoose.Schema({ variable: {type: mongoose.Schema.Object ...

Developing a custom edit template with Infragistics through coding

Currently, our team utilizes the Infragistics grid without binding datasets until runtime. Instead, we set up the grid settings in code as per the preference of our senior developer. While effective, this method can seem a bit lengthy. I am interested in ...

The innerHTML function in jQuery seems to be malfunctioning

My div isn't displaying the expected content. This is my controller action: /// <summary> /// GetCountiresForManufacturer /// </summary> /// <returns></returns> [Authorize(Roles = "Administrator")] [Ac ...

Syntax error encountered with the null-coalescing operator (`??`)

Encountering Syntax Errors After Upgrading Angular Plugin I am facing some syntax errors after attempting to upgrade a plugin in a system that was originally developed by someone else. Although I am relatively new to Angular, I tried to simply replace the ...

The jQuery form submission functionality fails to execute properly in the presence of a callback function

I have been on the hunt for a solution to this problem, but unfortunately I haven't been able to find one. The issue at hand is that when using the jQuery Submit function with a button and a callback function defined, it doesn't seem to work. Her ...

Can someone explain the distinction between 'return item' and 'return true' when it comes to JavaScript array methods?

Forgive me for any errors in my query, as I am not very experienced in asking questions. I have encountered the following two scenarios :- const comment = comments.find(function (comment) { if (comment.id === 823423) { return t ...

Determining the value of an object property by referencing another property

Upon running the code below, I encounter the following error message: Uncaught TypeError: Cannot read property 'theTests' of undefined $(document).ready(function() { var Example = {}; Example = { settings: { theTests: $(&apo ...