SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Newport79's Avatar
    Join Date
    Nov 2006
    Location
    England, Birmingham
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript to change iframe src

    Hi all,

    I have an iframe with a default source, but want to be able to change the source of this to a different address when someone clicks one of a number of links below it.

    My initial code is:
    Code:
    <script type="text/javascript">
    function changesrc(iframe_style){
    document.getElementById(iframe_style).setAttribute('src',0)
    }
    </script>
    which should change the src attribute of this when one of the links is clicked:
    Code:
    <iframe id="iframe_style" src="http://www.yudu.com/item/embedded_reader/283726/News-Beat?refid=83508">We're sorry, your browser doesn't support IFrames. You can still <a href="http://www.yudu.com/item/details/283726/News-Beat?refid=83508">visit this item.</a>, however.
    </iframe>
    And an example of one of the links is this:
    Code:
    <li><a href="http://www.yudu.com/item/embedded_reader/284894/News-Beat?refid=83508" onClick="changesrc('iframe_style','http://www.yudu.com/item/embedded_reader/284894/News-Beat?refid=83508');return false"><img src="http://www.yudu.com/item_thumbnail/28/3726/994216f08/thumb/page1.jpg" alt="December 2010" style="border: 0;" /><p>December</p></a></li>
    With the above the scr of the iframe gets changed but only to 0. so what obviously isn't happening is it is not retrieving the value in the link and returning it to the iframe src.

    Hope some of that made sense??

    Please let me know if I've gone about this the wrong way and I need to completely re-think what I've done so far.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,812
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    As the addresses are for pages not on your site, JavaScript has no access.

    JavaScript can only interact with the content of an iframe when the pages displayed in it uses an address on the same site
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Newport79 View Post
    With the above the scr of the iframe gets changed but only to 0.
    Well that's exactly what the function has been hard-coded to do. You're passing it two parameters but it only reads one.

    Code:
    <a ........... onClick="changesrc( 'iframe_style', this.href );return false">
    
    <script type="text/javascript">
    
    function changesrc(iframe_style, href)
    {
     document.getElementById(iframe_style).setAttribute('src', href);
    }
    
    </script>
    There are no security issues with applying foreign domains to the .src of an iframe.
    Tab-indentation is a crime against humanity.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •