Changing iframe src with Javascript

Question

I am trying to change an  lt iframe src      gt  when someone clicks a radio button  For some reason my code is not working correctly and I am having trouble figuring out why  Here is what I have    x000D   x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D   x000D   lt head gt  x000D     lt meta content  text html  charset utf-8  http-equiv  Content-Type    gt  x000D     lt title gt Untitled 1 lt  title gt  x000D   x000D     lt script gt  x000D    function go loc    x000D      document getElementById  calendar   src   loc  x000D      x000D     lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt iframe id  calendar  src  about blank  width  1000  height  450  frameborder  0  scrolling  no  gt  lt  iframe gt  x000D   x000D     lt form method  post  gt  x000D       lt input name  calendarSelection  type  radio  onselect  go  http   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1      gt Day x000D       lt input name  calendarSelection  type  radio  onselect  go  http   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1      gt Week x000D       lt input name  calendarSelection  type  radio  onselect  go  http   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1      gt Month x000D     lt  form gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can solve it by making the iframe in javascript      x000D   x000D    document write    lt iframe  id  frame  name  frame  src      srcstring      width  600   height  315    allowfullscreen gt  lt  iframe gt     x000D   x000D   x000D

User · Answer

Here s the jQuery way to do it       calendar   attr  src   loc

User · Answer

This should also work  although the src will remain intact   document getElementById  myIFrame   contentWindow document location href  http   myLink com

User · Answer

Maybe this can be helpful    It s plain html - no javascript    x000D   x000D   lt p gt Click on link bellow to change iframe content  lt  p gt  x000D   lt a href  http   www bing com  target  search iframe  gt Bing lt  a gt  - x000D   lt a href  http   en wikipedia org  target  search iframe  gt Wikipedia lt  a gt  - x000D   lt a href  http   google com  target  search iframe  gt Google lt  a gt   not allowed in inframe  x000D   x000D   lt iframe src  http   en wikipedia org  width  100   height  100   name  search iframe  gt  lt  iframe gt  x000D   x000D   x000D    By the way some sites do not allow you to open them in iframe  security reasons - clickjacking

User · Answer

In this case  it s probably because you are using the wrong brackets here   document getElementById  calendar   src   loc    should be  document getElementById  calendar   src   loc

User · Answer

The onselect must be onclick   This will work for keyboard users     I would also recommend adding  lt label gt  tags to the text of  Day    Month   and  Year  to make them easier to click on   Example code    lt input id  day  name  calendarSelection  type  radio  onclick  go  http   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1     gt  lt label for  day  gt Day lt  label gt    I would also recommend removing the spaces between the attribute onclick and the value  although it can be parsed by browsers    lt input name  calendarSelection  type  radio  onclick    go  http   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1     gt Day   Should be    lt input name  calendarSelection  type  radio  onclick  go  http   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1     gt Day

User · Answer

Here is my updated code  It works fine and it can help you     lt head gt     lt meta content  text html  charset utf-8  http-equiv  Content-Type    gt     lt title gt Untitled 1 lt  title gt     lt script type  text javascript  src  http   code jquery com jquery-1 8 2 js  gt  lt  script gt     lt script type  text javascript  gt    function go loc        document getElementById  calendar   src   loc         lt  script gt   lt  head gt    lt body gt     lt iframe id  calendar  src  about blank  width  1000  height  450  frameborder  0  scrolling  no  gt  lt  iframe gt      lt form method  post  gt       lt input name  calendarSelection  type  radio  onclick  go  http   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1      gt Day      lt input name  calendarSelection  type  radio  onclick  go  http   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1      gt Week      lt input name  calendarSelection  type  radio  onclick  go  http   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1      gt Month    lt  form gt    lt  body gt    lt  html gt

User · Answer

change onselect to onchange in inputs and use  calendar src   loc    x000D   x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D   x000D   lt head gt  x000D     lt meta content  text html  charset utf-8  http-equiv  Content-Type    gt  x000D     lt title gt Untitled 1 lt  title gt  x000D   x000D     lt script gt  x000D    function go loc    x000D      calendar src   loc  x000D      x000D     lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt iframe id  calendar  src  about blank  width  1000  height  450  frameborder  0  scrolling  no  gt  lt  iframe gt  x000D   x000D     lt form method  post  gt  x000D       lt input name  calendarSelection  type  radio  onchange  go  https   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1      gt Day x000D       lt input name  calendarSelection  type  radio  onchange  go  https   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1      gt Week x000D       lt input name  calendarSelection  type  radio  onchange  go  https   calendar zoho com embed 9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0 title Kevin Calendar amp type 1 amp l en amp tz America Los Angeles amp sh  0 0  amp v 1      gt Month x000D     lt  form gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

[javascript] Changing iframe src with Javascript

Examples related to javascript

Examples related to iframe

Examples related to src