changing iframe source with jquery

Question

I ve been trying this for a bit now and have looked at other answers to similar questions on SO  but when I am trying to change the src attribute of an iframe  it updates it for the whole window  Here is the following code I am using that works correctly  no jquery     lt html gt   lt head gt   lt style type  text css  gt  iframe ifrm        border none      padding  5em      margin 1 5em 0 1em      width 100       height 100      lt  style gt   lt script src    js jquery-1 4 2 js  type  text javascript  gt  lt  script gt   lt script type  text javascript  gt      lt   CDATA                                                             this is the function I m trying to replace      function loadIframe iframeName  url        if   window frames iframeName              window frames iframeName  location   url             return false            return true          gt   lt  script gt   lt  head gt    lt body gt   lt ul gt   lt li gt  lt a href  http   www google com   onclick  return loadIframe  ifrm   this href   gt Page 1 lt  a gt   lt  li gt   lt li gt  lt a href  tabs html  onclick  return loadIframe  ifrm   this href   gt Page 2 lt  a gt  lt  li gt   lt  ul gt   lt div class  iframe  gt   lt iframe name  ifrm  id  ifrm  src  tabs html  frameborder  0  gt  Your browser doesn t support iframes  lt  iframe gt        As I said  I ve tried       ifrm   attr  src    http   www google com     which displays the page  but not in the iframe  I m really just learning jquery  but I can t figure out what s different about my situation than other similar questions like this   Jquery and iFrame update  Thanks

User · Answer

Using attr   pointing to an external domain may trigger an error like this in Chrome   Refused to display document because display forbidden by X-Frame-Options   The workaround to this can be to move the whole iframe HTML code into the script  eg  using  html   in jQuery    Example   var divMapLoaded   false      container   scroll function         if    divMapLoaded   amp  amp       map   position   left  lt       map   width               map-iframe   html   lt iframe id   map-iframe                width   100    height   100    frameborder   0   scrolling   no                marginheight   0   marginwidth   0                src   http   www google it maps t m amp amp cid 0x3e589d98063177ab amp amp ie UTF8 amp amp iwloc A amp amp brcurrent 5 0 1 amp amp ll 41 123115 16 853177 amp amp spn 0 005617 0 009943 amp amp output embed                gt  lt  iframe gt         divMapLoaded   true

User · Answer

Should work  Here s a working example  http   jsfiddle net rhpNc  Excerpt  function loadIframe iframeName  url        var  iframe           iframeName       if   iframe length             iframe attr  src  url           return false            return true

[jquery] changing iframe source with jquery

Examples related to jquery