If the child window opened with window.open() freezes, it causes the parent window to freeze as well

I have a simple question that I can't seem to find an answer to anywhere. In one tab, let's call it "A," I use window.open(). The new tab, "B," starts loading with some ajax in its script. The ajax takes a long time, purposely so as I am testing handling lengthy calls. After about 10 seconds, tab "B" freezes and surprisingly, so does tab "A."

I've tried using both window.open("url", "_blank"); and window.open("url");, but neither resolves the issue.

To make things more confusing, when tab "B" loads without any timeout issues, everything functions perfectly. However, once I change the URL parameters in tab "B" (triggering long ajax requests), causing it to timeout, tab "A" still freezes. It's perplexing how they remain connected after the window.open() execution is done. Interestingly, other tabs continue working fine throughout all this.

I must be overlooking something here. Why are tab "B" and tab "A" still linked even after the initial window.open() call? This situation reminds me of quantum entanglement, as I observed something similar in Safari too, not just Chrome on Mac.

Both pages utilize the DataTables jQuery plugin for making ajax calls through API. Although I doubt DataTables could be causing this strange connection between tabs...

Does anyone from the SO community have any insights or ideas on this peculiar issue?

Thank you all in advance!

javascriptajaxdatatableswindow.open

Answer №2

This occurs because the new window is launched within the same process as the original window.

If you want a link to open in a different process from your webpage, simply include rel="noreferrer" and target="_blank" as attributes in the <a> tag, then direct it to a URL on another domain name. For instance: 

<a href="http://www.google.com" rel="noreferrer" target="_blank">Google</a>

source: https://blog.chromium.org/2009/12/links-that-open-in-new-processes.html

Answer №3

One solution could be to eliminate the reference to the parent from the window object by using this code:

window.parent = null;

Answer №4

When opening a new window, don't forget to include the code window.focus() to ensure it has focus.

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

Cannot utilize the subscribed output value within the filter function

I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...

javascriptangulartypescriptangular7

Experimenting with mocha and Nightmare.js, utilizing traditional syntax and without the use of ES6 features

Here is a real-world example that I am using: How to Use Nightmare.js without ES6 Syntax and Yield However, when I include it in a Mocha test, it times out. Here's the code snippet: describe('Google', function() { it('should perform ...

javascriptmocha.jsnightmare

Executing a jQuery.ajax call using a proxy server

I'm currently working on a Chrome extension and I have encountered an issue. When making a jQuery.ajax request for a standard HTTP page from a page served via HTTPS, Chrome blocks the request. This has led me to consider if it would be feasible to ret ...

javascriptjqueryajaxproxy-server

Is there a way to capture and handle the data from XHR responses in casperjs?

Instead of constantly checking for changes in the html and using unreliable XPaths to extract data, I am interested in being able to extract information from XHR packets. It seems like a much more efficient way to retrieve the data displayed dynamically on ...

ajaxgoogle-chromeweb-scrapingphantomjscasperjs

Determining if a number exceeds 3 decimal points using AngularJS

I have encountered a problem where I need to determine if a value has more than three decimal places in AngularJS. Although I am familiar with checking if a value is a whole number or greater than zero, I am unsure how to perform this specific task. Below ...

javascriptangularjsangular

Error in Vue console: Uncaught TypeError - The variable "_ctx" is not defined on the specified value

I'm encountering an issue that is puzzling me: Everything seems to be working perfectly as I try to display data from an API. However, I keep getting an error stating that personnel.departmentID is undefined, and unfortunately my vue-debug tool isn&a ...

javascriptvue.jsvuejs3

What are the steps to convert a canvas element, using an image provided by ImageService as a background, into a downloadable image?

I've been working on an app that allows users to upload an image, draw on it, and save the result. To achieve this functionality, I'm using a canvas element with the uploaded image as its background. The image is retrieved through ImageService. B ...

javascripthtmlgoogle-app-enginegoogle-chrome

What is the best method for transforming a nested object into an array of objects?

This object contains nested data var arr = [{ "children": [{ "children": [{ "children": [], "Id": 1, "Name": "A", "Image": "http://imgUrl" }], "Id": 2 "Name": "B", ...

javascriptarraysjsonobject

Is there a way to use JavaScript to emphasize specific choices in an HTML select element?

Recently, I came across this article: How to Highlight Options in an HTML Select Using jQuery The concept is very similar to what I am trying to achieve, but it seems a little too complex for my current level of understanding. In the html body of my proj ...

javascripthtmlselectcoding-stylehighlight

Extracting the video identifier from YouTube's embed code

I'm currently in the process of converting a PHP preg_match expression to extract a video ID from YouTube embed code using JavaScript. Here's what I have in PHP: $pattern = '%(?:https?://)?(?:www\.)?(?:youtu\.be/| youtube\.co ...

javascriptjqueryregexpreg-match

Is there a way to set a default value for the map function?

Currently utilizing React.js with the following code snippet: myArray.map(variable=>({value: variable.value, label: variable.label})) It's working well for the most part, but occasionally encountering this issue: TypeError : myArray is null Any s ...

javascriptreactjs

How come the default is operating when the number is specifically set to 1?

let spans = document.querySelector(`#spans`); let hrs = document.querySelector(`#hrs`); let mins = document.querySelector(`#mins`); let secs = document.querySelector(`#secs`); let start = document.querySelector(`#start`); let stop = document.querySelector( ...

javascript

What is the best way to execute a callback once a mongoose findOneAndUpdate operation has successfully completed

Within my API, I utilize the app.put method in Express to search for a document in a collection with a specific title using Mongoose's findOneAndUpdate method for updating. app.put("/articles/:articleTitle",(req, res) => { Article.fin ...

javascriptnode.jsmongodbexpressmongoose

When the jquery loop fails to function

I need to dynamically add a class to a specific tag using jQuery depending on an if condition. Here's the code snippet: if ($(".asp:contains('Home')")) { $("ul.nav-pills a:contains('Home')"). parent().addClass('active ...

javascriptjqueryhtml

Having trouble modifying a nested object array within a treeview component in Reactjs

Thanks for your help in advance! Question: I'm having trouble updating a nested object of an array in a treeview using Reactjs. Please refer to the code and sandbox link below: https://codesandbox.io/s/cocky-leakey-ptjt50?file=/src/Family.js Data O ...

javascriptreactjsreact-hooksreact-state-managementnested-object

What is the best way to utilize Object.keys for formatting incoming data?

Here is the data I have: const langs = { en: ['One', 'description'], pl: ['Jeden', 'opis'], }; I want to convert it into this format: const formattedData = { name: { en: "One", ...

javascript

The function XSP.partialRefreshGet is failing to transmit data and failing to activate any events

After spending quite a few hours on this issue, I'm completely stuck... Can somebody please explain why the following code isn't functioning as expected: I've recently set up a new database on a Domino 8.5.3 server with all default configu ...

ajaxxpagesxpages-ssjs

What is causing the router.events to not fire for FooComponent in my Angular project?

Upon opening the following link , the eventsFromFoo entries in the console are nowhere to be found. It appears that this.router.events is failing to trigger for FooComponent. Any insights on why this might be happening? I am in urgent need of capturing t ...

javascriptangular

Guide on effectively incorporating CSS and JS files packaged as an NPM module using gulp

How can I efficiently incorporate CSS and JS files from an NPM package, installed via gulp, into my index.html file? I have used NPM to install the Materialize CSS framework by running: npm install --save-dev materialize-css Now, I need to include the CS ...

javascripthtmlcssnpmgulp

Tips for postponing the execution of following tasks until the completion of the setState and ensuring that they are reliant on

I'm encountering an issue with the useEffect hook in my React app that uses useState. Here's the code snippet: const [jobTypes, setJobTypes] = useState([]); const getJobTypes = async () => { try { const response = await fetch(&a ...

javascriptreactjsasynchronousstate