How to navigate URL in an iframe with JavaScript?

JavascriptFront End TechnologyProgramming ScriptsWeb Development

Iframes are a great way to embed content from another web page into your own web page. However, if you try to access the contents of an iframe with JavaScript, you will find that it's not quite as simple as you might expect. This is because the iframe's URL is not accessible to JavaScript.

Why Can't You Access the Iframe's URL?

The reason you can't access the iframe's URL is because of the same-origin policy. This policy prevents JavaScript from accessing resources from another domain. So, if the iframe is on a different domain than the parent page, then JavaScript will not be able to access its URL.

Workarounds

There are a few ways to work around this limitation.

One way is to use the postMessage API. This API allows you to send messages between window objects. So, you can use it to send a message from the parent page to the iframe, and then have the iframe respond with its URL.

Another way is to use a URL fragment identifier. This is a special part of the URL that is not sent to the server. So, you can set the fragment identifier on the parent page, and then have the iframe read it and respond accordingly.

Now let's look at both of the method in detail with working code −

Using the postMessage API

The first method we'll look at is using the postMessage API. This API is supported in all modern browsers.

To use this method, we'll need to do the following −

  • Add an event listener to the parent page that will listen for messages from the iframe.

  • In the iframe, send a message to the parent page when the iframe is loaded.

  • The parent page will receive the message and can then do whatever it wants with the iframe's URL.

Example

Let's look at some code to see how this works −

<!DOCTORPE html> <html> <head> <script> //add an event listener to the parent page window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { //get the URL from the event data var url = event.data; //do something with the URL console.log(url); } </script> </head> <body> <iframe src="https://www.tutorialspoint.com/questions/index.php" width="600" height="300"> </iframe> </body> </html>

In the code above, we first add an event listener to the parent page. This listener will be triggered whenever the parent page receives a message.

Next, we have a function that will be called when the event listener is triggered. This function takes an event object as an argument. The event object contains data about the event that occurred. In this case, the data will be the URL of the iframe.

Finally, we have the iframe itself. When the iframe is loaded, it will send a message to the parent page with its URL.

Using a URL Fragment Identifier

The second method we'll look at is using a URL fragment identifier. This method is supported in all modern browsers.

To use this method, we'll need to do the following −

  • Set the fragment identifier on the parent page.

  • In the iframe, read the fragment identifier and respond accordingly.

  • The iframe can then do whatever it wants with the parent page's URL.

Example

Let's look at some code to see how this works −

<!DOCTYPE html> <html> <head> <script> //set the fragment identifier on the parent page window.location.hash = "iframe-url"; </script> </head> <body> <iframe src="https://www.tutorialspoint.com/" width="600" height="300"> </iframe> </body> </html>

In the code above, we first set the fragment identifier on the parent page. This is done by setting the window.location.hash property.

Next, we have the iframe. When the iframe is loaded, it will read the fragment identifier and see that it is set to "iframe-url". The iframe can then do whatever it wants with the parent page's URL.

Conclusion

If you need to access the URL of an iframe with JavaScript, you can use either the postMessage API or a URL fragment identifier.

raja
Updated on 10-Oct-2022 12:04:36

Advertisements