Get current URL from IFRAME

Question

Is there a simple way to get the current URL from an iframe   The viewer would going through multiple sites   I m guessing I would be using something in javascript

User · Answer

If you are in the iframe context   you could do  const currentIframeHref   new URL document location href   const urlOrigin   currentIframeHref origin  const urlFilePath   decodeURIComponent currentIframeHref pathname     If you are in the parent window frame  then you can use https   stackoverflow com a 938195 2305243  s answer  which is  document getElementById  iframe id   contentWindow location href

User · Answer

I had an issue with blob url hrefs   So  with a reference to the iframe  I just produced an url from the iframe s src attribute       const iframeReference   document getElementById  iframe id        const iframeUrl   iframeReference   new URL iframeReference src    undefined      if  iframeUrl            console log  Voila      iframeUrl         else           console warn  iframe with id iframe id not found

User · Answer

If your iframe is from another domain   cross domain   the other answers are not going to help you    you will simply need to use this   var currentUrl   document referrer    and - here you ve got the main url

User · Answer

If you re inside an iframe that don t have cross domain src  or src is empty  Then  function getOriginUrl         var href   document location href      var referrer   document referrer         Check if window frameElement not null     if window frameElement            href   window frameElement ownerDocument location href             This one will be origin         if window frameElement ownerDocument referrer     quot  quot                 referrer   window frameElement ownerDocument referrer                         Compare if href not equal to referrer     if href    referrer               Take referrer as origin         return referrer        else              Take href         return href          If you re inside an iframe with cross domain src  Then  function getOriginUrl         var href   document location href      var referrer   document referrer         Detect if you re inside an iframe     if window parent    window               Take referrer as origin         return referrer        else              Take href         return href

User · Answer

Some additional information for anyone who might be struggling with this  You ll be getting null values if you re trying to get URL from iframe before it s loaded  I solved this problem by creating the whole iframe in javascript and getting the values I needed with the onLoad function  var iframe   document createElement  iframe    iframe onload   function            some custom settings     this width screen width this height screen height  this passing 0  this frameBorder  quot 0 quot        var href   iframe contentWindow location href      var origin   iframe contentWindow location origin      var url   iframe contentWindow location url      var path   iframe contentWindow location pathname       console log  quot href   quot   href      console log  quot origin   quot   origin      console log  quot path   quot   path      console log  quot url   quot   url      iframe src    http   localhost folder index html    document body appendChild iframe    Because of the same-origin policy  I had problems when accessing  quot cross origin quot  frames - I solved that by running a webserver locally instead of running all the files directly from my disk  In order for all of this to work  you need to be accessing the iframe with the same protocol  hostname and port as the origin  Not sure which of these was were missing when running all files from my disk  Also  more on location objects  https   www w3schools com JSREF obj location asp

User · Answer

For security reasons  you can only get the url for as long as the contents of the iframe  and the referencing javascript  are served from the same domain  As long as that is true  something like this will work   document getElementById  iframe id   contentWindow location href   If the two domains are mismatched  you ll run into cross site reference scripting security restrictions   See also answers to a similar question

User · Answer

Hope this will help some how in your case  I suffered with the exact same problem  and just used localstorage to share the data between parent window and iframe  So in parent window you can   localStorage setItem  url   myUrl     And in code where iframe source is just get this data from localstorage   localStorage getItem  url      Saved me a lot of time  As far as i can see the only condition is access to the parent page code  Hope this will help someone

[javascript] Get current URL from IFRAME

Examples related to javascript

Examples related to url

Examples related to iframe