How to obtain the src URL of an iframe in a cross domain situation

In my web application, I am dealing with an iframe and I require the ability to acquire its current URL from the parent document. This includes situations where the user navigates within the frame and modifies the original source URL.

The URL is essential for social sharing purposes.

Given that this involves a cross-domain scenario, I do not have control over the child document since it belongs to a remote domain.

While I understand the restrictions of the same-origin policy which restricts access from a parent document to a child one in different domains, I am exploring potential solutions through innovative means - there must be a workaround available.

javascripturliframecross-domainsrc

Answer №1

If you are unable to manage the content within an iFrame, one possible approach is to develop a proxy that can inject the specified line of code into each page.

window.postMessage(window.location,'*');

Subsequently, on the parent page, you can set up a listener for the message.

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  console.log(event.data);
}

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

Error in custom script functionality on Blazor server-side

I recently encountered an issue with my Blazor Server side project that involved integrating the Black Dashboard template from Creative Tim. Initially, my components, specifically the text fields, were functioning correctly with MudBlazor. However, upon ad ...

javascriptbootstrap-4blazor-server-sidemudblazor

Implementing a feature in jQuery to reveal an element upon button click

I need to create a functionality where clicking a button will display a panel. Initially, I have set the panel's visibility to false in its properties. So, when the user clicks the button, the button should hide and the panel should show up. How can I ...

javascriptjqueryhtmlcss

Transforming React Redux reducer to hooks for a more modern approach

I am in the process of creating a login and registration application. I need to change a reducer that is currently being used for a class-based component to work with hooks instead. Here is the existing reducer: import { SET_CURRENT_USER, USER_LOADING } fr ...

javascriptreactjs

Use Angular2 to showcase the selected image as the main one when the user clicks on the

I'm working on creating a product thumbnail gallery, and I'd like the main image to be displayed when the user clicks on a thumbnail. I am using Angular for this project, although I am still learning my way around the framework. product.html &l ...

javascripthtmlangulartypescript

Expanding a SAPUI5 class by incorporating a pre-determined header

In my attempt to expand a class using SAPUI5 methodology, I created a basic version to test its functionality. However, the predetermined title is not displaying in this particular example: var app; sap.m.Page.extend("MyPage", { title: "hi", rendere ...

javascriptsapui5

Using Express.js 4 to manipulate data by reading from and writing to an array directly, without the need

I am currently developing an express.js sample application for my own reference. I need to store data without setting up a database at the moment. I am curious about how I can save data to a file in express. It doesn't necessarily have to persist, bu ...

javascriptexpress

Using jQuery to dynamically insert variables into CSS styles

I am attempting to use jQuery 3 to modify the CSS of a class and change the background color. My first step is converting an rgba color code (properties.color) to a hexadecimal code, which is functioning correctly. Next, I try to change the background co ...

javascriptjquerycss

clicking on internal links in the bootstrap side menu causes it to jump

Im trying to add a side menu to a help page. The menu and internal links are functioning properly, but when clicked, the side menu partially goes behind the navbar. As a beginner, I'm not sure how to resolve this issue. Can someone offer some guidan ...

javascriptjqueryhtmlcsstwitter-bootstrap

Resolving Meteor collections in the ui-routerIncorporating

My goal is to utilize meteor angular js ui-router resolve to fetch information of a user selected from a user list. $stateProvider .state('userprofile', { url: '/user/:userId', cache: false, template: ' ...

javascriptangularjsmeteorangular-ui-routerresolve

Why is my JavaScript if statement not functioning properly when paired with an else statement

Currently, I am in the process of developing a game and have encountered an issue with implementing a new item for purchase. Despite having all the necessary components in place, the code seems to be skipping over the function unexpectedly. function buy ...

javascriptif-statement

Is it true that eliminating white spaces can enhance a website's loading speed?

I'm curious about something. Can removing white space actually make a website load faster? For instance, take a look at the following CSS snippet - body{ overflow-wrap:break-word; word-break:break-word; word-wrap:break-word } .hidden{ display:none } . ...

javascripthtmljquerycssajax

Creating an iOS smart banner similar to Facebook's without using the meta apple-itunes-app tag can be achieved by implementing custom

Is there a way to create a smart banner similar to what is seen on Facebook? I'm looking for something that doesn't have a close button and appears more condensed compared to the banners I've created. I found some information on this link. ...

javascriptiossafaribannersmartbanner

The hunt is on for greater value within the index

My requirement is to check the text content of a box. If it matches any value stored in an ARRAY, then I have to execute a specific action. var ARRAY1 = ["Saab", "Volvo", "BMW"]; if (select[i].innerHTML.indexOf('ARRAY1') != -1){//code here} ...

javascriptarraysindexof

Sending a bulky item as a straightforward argument or object

Here's a simple question - will the veryLargeObj pass as a reference in both scenarios? And if so, is there any performance difference aside from object creation? Example 1: import veryLargeObj from './here' function someFn(veryLargeObj){ ...

javascriptnode.jses6-modules

What is the procedure for generating an nxn matrix (array within an array) that is completely populated with zeroes?

I'm looking to create an array matrix with the following structure: createMatrix(4); // desired output: [[0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0]]; Here's my current solution : function createMatrix (n) { var innerArr; var outerArr = ...

javascriptarraysmatrix

Uncertainty surrounding the implementation of onclick function

Just starting out with JavaScript and hoping for some help understanding this. 1) Why isn't this code working as expected? var allSpans = document.getElementsByTagName('span'); allSpans.onclick = function() { alert('hoo'); }; ...

javascript

The Vue property or method is unrecognized when utilizing the non-minified version

When I attempted to display the name 'John' using an inline template in a simple Vue example, I encountered the following error message: [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. ...

javascriptvue.jsvuejs2vue-component

Troubleshooting problems encountered in Nest.js due to modifications made within a service.ts file

I'm currently working on a Nest.js project and here is the content of the automobile.service.ts file: import { Injectable } from '@nestjs/common'; import { InjectRepository } from '@nestjs/typeorm'; import { Car } from './enti ...

javascripttypescriptnestjs

Creating dynamic dropdown lists that automatically apply the active class to the chosen option

Here is the JSTL tags code I am using: <ul class="megamenu skyblue"> <!--1st level of categories --> <c:forEach var="item1" items="${shoppingCart.categories}"> <li id="headerCategory" class="grid" style="border-right: 1px solid # ...

javascripthtmlcssjspjstl

I am looking to create a counter in NextJS that will store its value in a database for persistent storage. How can

In my NextJS and ReactJS project, I am creating a like-counter feature that will keep track of the number of likes a user can give. The maximum limit for likes is set to 100. The count is stored in a FaunaDB. While I have successfully displayed the curren ...

javascriptreactjsnext.jsfaunadb