What is the process for activating an event when a window undergoes a change?

I created a window using the window.open method to display a form. Once the user submits the form, they are redirected to a page called success.html. Is there a way to trigger an event after success.html finishes loading? I attempted the following approach:

var myWindow = window.open("http://theform.com", "THE_NAME", 
    "menubar=no,location=no,resizable=no,scrollbars=no,status=no,width=500,height=463");
myWindow.addEventListener("load", (event) => {
    console.log("Window event" + myWindow.location.href);
}, false);

However, no events seem to be triggered.

javascript

Answer №1

If the windows share the same origin, one option is to utilize the postMessage method for communication.

To delve deeper into this topic, check out: SecurityError: Blocked a frame with origin from accessing a cross-origin frame (even relevant for iframes/frames).

Answer №2

Consider relocating your event listener to the success.html file instead of its current placement.

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

The initialization of the R Shiny HTML canvas does not occur until the page is resized

I am currently facing an issue while integrating an HTML page with a canvas into my shiny R application using includeHTML(). The packages I am using are shiny, shinydashboard, shinycssloaders, dplyr, and DT. Everything is working perfectly fine except for ...

javascripthtmlcssshinyhtml5-canvas

Ways to showcase an alert or popup when clicking?

I am utilizing a date picker component from this site and have enabled the 'disablePast' prop to gray out past dates preventing selection. Is there a way to trigger an alert or popup when attempting to click on disabled days (past dates)? Any sug ...

javascriptreactjsmaterial-ui

Avoid using `@typescript-eslint/no-floating-promises` when using a `const` function

Can anyone help me understand why the @typescript-eslint/no-floating-promises rule works with some async functions but not all? To my understanding, these two functions should be equivalent: const getUser = async (userId: string): Promise<User> => ...

javascripttypescripttypescript-eslint

Setting up PostgreSQL database integration with Node.js

I want to remove certain entries from a PostgreSQL database based on creation/expiry dates, but I only want this to happen when the Node server first starts. Currently, I have added the line DELETE FROM ....db WHERE date <= CURRENT_DATE to the main r ...

javascriptnode.jspostgresqlexpress

What is the best way to connect a directive's attribute to a dropdown menu in Angular.js?

Within a dropdown, I have a selection of templates that are connected to $scope.templates: [{"id":1, "name":"Test 1",{"id":2, "name":"Test 2"}]. Furthermore, there is a directive in place, <editor data-template="1"></editor> The goal is to ...

javascriptangularjs

Tips for converting a parent class Sprite into a subclass MySprite in Cocos2d-JS

There is a custom class called MySprite that extends Sprite and includes additional methods. var MySprite = cc.Sprite.extend({ ctor:function(){ this._super(); }, doSomethingStrange:function(){ //meow meow } } ); In the game s ...

javascriptcocos2d-js

Is there an equivalent to Tomcat specifically designed for Node.js applications?

Looking for an application server that offers an administration interface to deploy node.js applications, access log files, and manage running applications with options to start, stop, restart, and monitor? ...

javascriptnode.jstomcatnpmdeployment

Leveraging the power of ReactJS for efficiency in executing multiple API calls concurrently

I'm encountering an issue with the following code snippet: let tmpContributors = [...this.state.contributors]; for (let i = 0; i < 10; i++) {//10 most active contributors due to performance and github limits contributorPropertiesPromises.pus ...

javascriptreactjsfrontend

The touchstart event handler triggers but the event returns as undefined

@ontouchdown="handleTouch(event)" handleTouch(event) { console.log(event); console.log("touch event"); } Why is the event not being passed properly? ...

javascriptvue.js

I am encountering a problem with the image source in my Next.js project

I've encountered an issue with using Sanity image URLs in my project. The error message displayed in my console page reads: next-dev.js?3515:25 Warning: Prop src did not match. Server:"https://cdn.sanity.io/images/jbcyg7kh/production/4f6d8f5ae1b ...

javascriptreactjsnext.jsfrontendsanity

The failure of jQuery AJAX error callback to execute

I'm currently facing an issue with an AJAX call that I have in my code. Here's the code snippet: $.ajax({ type: "get", url: "xxx.xxx.xxx/xxx.js", dataType: 'jsonp', success: function(data) { ...

javascriptjqueryajaxjsonp

What is the best way to incorporate a search feature within Bootstrap cards?

I've been struggling to incorporate a search feature within my bootstrap cards. Despite trying various online methods, none have proven successful for me so far. Below is my HTML code - any assistance in implementing a search filter into my app would ...

javascriptpythonhtmlcss

Calculate the total amount by multiplying the price and quantity values within nested arrays

I have a collection of objects with nested arrays structured like this [ { orderId: 123, orderStatus: 'Pending', date: 'June 13, 2020', products: [ {product: 'choco', price: 300, qty: 3}, {product: 'm ...

javascriptarraysreactjsobjectsum

Determine the percentage of clicks on an HTML5 canvas radial progress bar

Recently, I designed a circular progress bar displaying a specific percentage. However, I am facing a challenge in determining how to calculate the percentage when a user clicks on either the black or green part of the circle. Could you provide insight on ...

javascriptjqueryhtmlcanvas

php failure to execute included file

Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...

phpjavascriptcssfileinclude

Using JavaScript and HTML to show the current month, date, and year on a webpage

I am looking to display not only the time, but also the month, date and year. My attempted solution involved creating variables for the month, day and year, and then using getElementById. Here is an example of what I tried: var d = date.getDay(); var mn ...

javascripthtmldate

Creating distinctively tinted vertices for every subdivision step is simple with the following technique

I am currently working on an application that utilizes different standard geometries, such as box geometry. The application can apply up to 5 levels of subdivision on the original geometry. I am facing challenges in coding a color-coding system for the ver ...

javascriptthree.js3dgeometryvertices

Import failures in Three.js could be attributed to potential issues with Webpack

Please note: I am utilizing create-react-app along with three.js v0.99.0. In my current project, I am faced with the challenge of importing specific modules from three.js to avoid bundling the entire library, which results in a large uncompressed file siz ...

javascriptwebpackimportthree.jscreate-react-app

Verifying numerous route paths using Vue's dynamic binding (v-bind)

Currently, I am assigning a class to an li element depending on the route path using this code snippet: <li v-bind:class="{ 'current': $route.path == '/services' }"><nuxt-link to="/services">Services</ ...

javascriptvue.jsvuejs2

How can you reset a variable counter while inside a forEach loop?

I am currently working on resetting a counter that is part of a recursive forEach loop within my code. Essentially, the code snippet provided calculates the length of the innermost key-value pair as follows: length = (key length) + (some strings inserted) ...

javascriptnode.jsobject