How do I implement Cross Domain URL Access from an Iframe using Javascript

Question

I need to access the Parent Domain URL from my Iframe which is in another domain   For example   example com  is my website which has an Iframe from another parent domain  such as  google com   Here I need to access the parent domain URL from my example com  That is  I need to get the URL  google com  in my  example com  domain  Moreover  the Parent domain cannot be hard coded   What I tried was using the following code   window parent location href     but this results in Access denied error  How do I implement this properly in order to achieve this

User · Answer

You might want to take a look at these questions/answers ; they could give you some informations concerning your problem :

To make things short : accessing iframe from another domain is not possible, for security reasons -- which explains the error message you are getting.

The Same origin policy page on wikipedia brings some informations about that security measure :

In a nutshell, the policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions — but prevents access to most methods and properties across pages on different sites.

A strict separation between content provided by unrelated sites must be maintained on client side to prevent the loss of data confidentiality or integrity.

User · Answer

try  window frameElement ownerDocument domain

User · Answer

Good article here  Cross-domain communication with iframes  Also you can directly set document domain the same in both frames  even   document domain   document domain    code has sense because resets port to null   but this trick is not general-purpose

User · Answer

You can try and check for the referer  which should be the parent site if you re an iframe  you can do that like this   var href   document referrer

User · Answer

Instead of using the referrer  you can implement window postMessage to communicate accross iframes windows across domains   You post to window parent  and then parent returns the URL  This works  but it requires asynchronous communication   You will have to write a synchronous wrapper around the asynchronous methods  if you need it synchronous    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta http-equiv  content-type  content  text html  charset utf-8    gt       lt title gt  lt  title gt        lt  --      lt link rel  shortcut icon  href   favicon ico  gt         lt link rel  start  href  http   benalman com   title  Home  gt        lt link rel  stylesheet  type  text css  href   code php multi file php m benalman css  gt        lt script type  text javascript  src   js mt js  gt  lt  script gt      -- gt       lt script type  text javascript  gt             What browsers support the window postMessage call now             IE8 does not allow postMessage across windows tabs            FF3   IE8   Chrome  Safari 5    Opera10           function SendMessage                         var win   document getElementById  ifrmChild   contentWindow                  http   robertnyman com 2010 03 18 postmessage-in-html5-to-send-messages-between-windows-and-iframes                   http   stackoverflow com questions 16072902 dom-exception-12-for-window-postmessage                Specify origin  Should be a domain or a wildcard                  if  win    null     window  postMessage                    alert  oh crap                else                 win postMessage  hello                       alert  lol                         function ReceiveMessage evt                var message                if  evt origin      http   robertnyman com               if  false                    message    You       evt origin       are not worthy                             else                   message    I got      evt data      from      evt origin                                   var ta   document getElementById  taRecvMessage                if  ta    null                  alert message               else                 document getElementById  taRecvMessage   innerHTML   message                 evt source postMessage  thanks  got it      event origin                End Function ReceiveMessage             if   window  postMessage                alert  oh crap            else               if  window addEventListener                      alert  standards-compliant                       For standards-compliant web browsers  ie9                   window addEventListener  message   ReceiveMessage  false                             else                     alert  not standards-compliant  ie8                     window attachEvent  onmessage   ReceiveMessage                                lt  script gt     lt  head gt   lt body gt        lt iframe id  ifrmChild  src  child htm  frameborder  0  width  500  height  200   gt  lt  iframe gt       lt br   gt         lt input type  button  value  Test  onclick  SendMessage       gt    lt  body gt   lt  html gt    Child htm   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta http-equiv  content-type  content  text html  charset utf-8    gt       lt title gt  lt  title gt        lt  --      lt link rel  shortcut icon  href   favicon ico  gt         lt link rel  start  href  http   benalman com   title  Home  gt        lt link rel  stylesheet  type  text css  href   code php multi file php m benalman css  gt        lt script type  text javascript  src   js mt js  gt  lt  script gt      -- gt        lt script type  text javascript  gt                        Opera 9 supports document postMessage               document is wrong         window addEventListener  message   function  e                  document getElementById  test   textContent                 alert                  e domain     said      e data                               false                          https   developer mozilla org en-US docs Web API window postMessage            http   ejohn org blog cross-window-messaging             http   benalman com projects jquery-postmessage-plugin             http   benalman com code projects jquery-postmessage docs files jquery-ba-postmessage-js html              data     A string holding the message passed from the other window              domain  origin       The domain name of the window that sent the message              uri     The full URI for the window that sent the message              source     A reference to the window object of the window that sent the message          function ReceiveMessage evt                var message                if  evt origin      http   robertnyman com               if false                                message    You       evt origin       are not worthy                             else                               message    I got      evt data      from      evt origin                                     alert evt source location href               var ta   document getElementById  taRecvMessage                if ta    null                  alert message               else                 document getElementById  taRecvMessage   innerHTML   message                  http   javascript info tutorial cross-window-messaging-with-postmessage               evt source postMessage  thanks  got it   evt origin               evt source postMessage  thanks  got it                      End Function ReceiveMessage             if   window  postMessage                alert  oh crap            else               if  window addEventListener                      alert  standards-compliant                       For standards-compliant web browsers  ie9                   window addEventListener  message   ReceiveMessage  false                             else                     alert  not standards-compliant  ie8                     window attachEvent  onmessage   ReceiveMessage                                lt  script gt     lt  head gt   lt body style  background-color  gray   gt       lt h1 gt Test lt  h1 gt        lt textarea id  taRecvMessage  rows  20  cols  20   gt  lt  textarea gt    lt  body gt   lt  html gt

User · Answer

You have a couple of options    Scope the domain down  see document domain  in both the containing page and the iframe to the same thing  Then they will not be bound by  same origin  constraints  Use postMessage which is supported by all HTML5 browsers for cross-domain communication

[javascript] How do I implement Cross Domain URL Access from an Iframe using Javascript?

Examples related to javascript

Examples related to iframe

Examples related to cross-domain