Guide to accessing a newly opened window from a different domain originating from the current window

Currently working on an Angular project, I am facing a scenario where I have a link on page A that directs users to a different origin page B. The HTML code for the link is shown below:

...
<a href="https://another.origin"> PAGE B </a>
...

Once a user opens page B in a new window from page A, I need to be able to post a message to page B using 

referenceOfB.postmessage(msg, bOrigin)
. In order to do this, I must first obtain a reference to page B.

I attempted to use window.open to retrieve a reference to page B, but ended up with null. I am unsure if this is the correct approach and would appreciate any insights or suggestions on how to properly achieve this task.

javascriptangulartypescriptcross-domain

Answer №1

If you need to open a new window, the window.open function can help you achieve that - it will give you a reference to the newly spawned window. Once you have that reference, you can communicate with it by using the postMessage method.

For more information on the postMessage method, you can visit this link: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

var w = window.open('https://google.com')
w.postMessage('hello', "*"); // Instead of *, you can specify the target domain

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 error message "Unable to find 'encoding'" in NextJS is triggered by the use of try/require in the node_modules folder

Running a NextJS app in typescript with version 13.4.19, utilizing @apollo/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d7e687f7b687f4d392334233e">[email protected]</a> triggers a warning during the build proce ...

node.jstypescriptnext.jsapollo-servernode-fetch

Is it possible for JavaScript to be cached when it is located within the body tag of an HTML document?

Currently, I am exploring the topic of How to optimize HTML rendering speed, and came across the idea that scripts in the HEAD tag can be cached. I'm curious, is it possible to cache JavaScript in the BODY tag? If not, I wonder why YUI suggests placi ...

javascripthtmlcachingprogressive-enhancement

Introducing a fresh Backbone object attribute that points to an existing instance property

While working with Backbone/Marionette, I came across something unusual. When I create a new instance of a view with a new collection property and then create another instance of the same view, it seems that the collection property of the second view point ...

javascriptbackbone.jsmarionette

Assertion using Node.js with Selenium WebDriver

I am currently working on implementing assertions for testing using selenium webdriver with node js. However, I am encountering an issue where it returns undefined when trying to assert the page title (which is the URL of the page). It seems like I may n ...

javascriptnode.jsselenium-webdriver

The functionality of the remove button in the jQuery Dropzone seems to be malfunction

I devised a user-friendly drag and drop feature for uploading images using the dropzone plugin. Here is the code snippet that I implemented: <script src="<?php echo base_url() ?>acc/assets/dropzone/dropzone.js"></script> <form actio ...

javascriptphpjquerydropzone.js

Alert: Angular has detected that the entry point '@libray-package' includes deep imports into 'module/file'

Recently updated the project to Angular 9.1 and now encountering multiple warnings from the CLI regarding various libraries, such as these: Warning: The entry point '@azure/msal-angular' includes deep imports into 'node_modules/msal/lib-com ...

angulartypescriptangular-cli

Next.js page freezes when Axios request is made causing the tab to become unresponsive

Curious about how to troubleshoot (or where to start) with my current Axios problem. I am working on a Next.js project (12.3) and have an axios interceptor hook that manages all of my internal requests. The interceptor functions properly on every action/pa ...

node.jsreactjstypescriptnext.jsaxios

Dragging and dropping elements onto the screen is causing them to overlap when trying

I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop s ...

cssangulartypescriptangular-materialangular9

Exploring the concept of using a single route with multiple DTOs in NestJS

At the moment, I am utilizing NestJS for creating a restful API. However, I am currently facing an issue with the ValidationPipe. It seems to only be functioning properly within controller methods and not when used in service methods. My goal is to implem ...

typescriptvalidationdtonestjsclass-validator

Is there a way for me to receive user inputs, perform mathematical operations on them, and then display the result of the calculation? Additionally, is there a way to ensure that the output value automatically updates

As a newcomer to HTML and JavaScript, I'm unsure how to approach this task. Here is what I have so far: <div class="inputs"> <label for="#arena2v2">2v2 Arena Rating:&#9;</label><input class="pvp" type="number" step="1" m ...

javascriptjqueryhtml

Duplicating an Angular 2 reactive form without retaining the original reference

I am facing a challenge with my reactive form where I need to round certain values when the form is submitted, without altering their appearance on the page. To achieve this, I devised a method that generates a new form, rounds the specified values, and t ...

javascriptangularforms

Enhancing interactivity: Implementing a ripple effect for Card clicks in Material UI

I'm curious if there's a method to incorporate a ripple effect into Material UI's Card component when it is clicked. Additionally, I am wondering if it is achievable to have the ripple effect display on top of the content within the Card co ...

javascriptreactjsmaterial-designmaterial-ui

What are the best methods for cropping SVG images effectively?

Is it possible to crop a large SVG background that has elements rendered on top of it so that it fits the foreground elements? I am using svg.js but have not been able to find a built-in function for this. Can an SVG be cropped in this way? ...

javascriptreactjssvg.js

Issue with VueJS where changes made to properties in the mounted hook do not properly trigger the

I'm working on a VueJS component that features a button with computed properties for its class and text. These properties change every time the button is clicked, updating smoothly with each interaction. However, I've encountered an issue when at ...

javascriptvue.jsvuejs2local-storagevue-component

Can you explain the term 'outer' in the context of this prosemirror code?

Take a look at this line of code from prosemirror js: https://github.com/ProseMirror/prosemirror-state/blob/master/src/state.js#L122 applyTransaction(rootTr) { //... outer: for (;;) { What does the 'outer' label before the infinite loop ...

javascriptprose-mirror

Replicating the run configurations generated by the Angular2 CLI plugin in Eclipse

Currently using Eclipse Neon (4.6) along with the Angular 2 plugin, which provides run configurations such as ng build and ng serve. These configurations utilize the Angular CLI to execute build or serve commands within the project. It appears that these c ...

eclipseunit-testingangularangular-clirun-configuration

What is the best way to display HTML in this particular situation?

This is the function I am working on: public static monthDay(month: number): string { let day = new Date().getDay(); let year = new Date().getFullYear(); return day + ", " + year; } I am trying to add <span></span> tags around ...

javascripthtmlangulardatetypescript

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

My Joomla 1.5 site has CK Forms installed and is functioning properly, except for one issue: the tooltip on the captcha is not displaying correctly. It appears in a tiny 1px font size. Even though I have tried debugging using Firebug and confirmed that the ...

javascriptcssfirebugjoomla1.5

Tips for obtaining an Instance of a Mat-Table when there are multiple tables within the component

Encountering an issue where I have a component in Angular 6 generating multiple Mat-Tables with Data. Using the ng-for loop to iterate through all the Mat-Table Data sources within a div tag. However, when trying to add a new row to a table, unable to iden ...

angularmat-table

What is the best way to maintain a Tampermonkey script within Selenium?

I'm trying to execute a JavaScript script before the page loads, so I've placed it in Tampermonkey. However, the script doesn't persist after closing the driver. Whenever I run the code again, the saved script is no longer there. This code u ...

javascriptpythonseleniumselenium-webdriverselenium-chromedriver