Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    onclick="load(url)" into iframe issue

    I have a client that has 15 unique movies, each must be dynamically loaded into an iframe created within the webinar page using the click of a text-link. I am trying to use the onclick event, but when multiple movies are listed, the code wants to load only the first movie listed. The code for a single movie currently looks like...

    Code:
    <script type="text/javascript">
    
    function load(file){
    var iframeTag = document.getElementById('frame');
    var body = document.getElementsByTagName('body').item(0);
    var myiframe = document.getElementById('myiframe');
    if(iframeTag) body.removeChild(iframeTag);
    iframe = document.createElement('iframe');
    iframe.src = file; 
    iframe.id = 'frame';
    iframe.width = '960px';
    iframe.height = '720px';
    iframe.frameborder = '0';
    iframe.scrolling = 'no';
    myiframe.appendChild(iframe);
    } 
                            </script>
                      <a onclick="load('unique movie url'); return false">Load Movie </a></p>
    How can I configure the code so that I will have 15 separate "Load Movie" links, each able to load its own unique movie into the iframe that is generated? Similarly, I would guess I would need to "unload" previous movie urls before another one could be loaded???

    Thanks in advance for any help you can offer...I am stumped.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,694
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Hope your not trying to do this with one button. 15 movies, 15 buttons or a select dropdown with 15 options. Then send the url with each button.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    why not just hardcode the iframe and change the src onclick?

    Code:
    <body>
    <iframe id="frame" width = '960px' height = '720px' height = '720px' frameborder = '1' scrolling = 'no'></iframe><br>
    <script type="text/javascript">
    
    function load(file){
    document.getElementById('frame').src=file+"?autoplay=1";
    } 
    </script>
    <a href="#" onclick="load('http://www.youtube.com/embed/XmxaPKt94jI'); return false">Load Movie 1</a>
    <a href="#" onclick="load('http://www.youtube.com/embed/Ns7Z8ag4oSY'); return false">Load Movie 2 </a>
    <a href="#" onclick="load('http://www.youtube.com/embed/yv0zA9kN6L8'); return false">Load Movie 3 </a>
    				  
    </body>

  • Users who have thanked xelawho for this post:

    dposthuma (09-24-2012)

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, that worked fine. I guess I was making it more complicated than it needed to be.

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    why not just hardcode the iframe and change the src onclick?

    Code:
    <body>
    <iframe id="frame" width = '960px' height = '720px' height = '720px' frameborder = '1' scrolling = 'no'></iframe><br>
    <script type="text/javascript">
    
    function load(file){
    document.getElementById('frame').src=file+"?autoplay=1";
    } 
    </script>
    <a href="#" onclick="load('http://www.youtube.com/embed/XmxaPKt94jI'); return false">Load Movie 1</a>
    <a href="#" onclick="load('http://www.youtube.com/embed/Ns7Z8ag4oSY'); return false">Load Movie 2 </a>
    <a href="#" onclick="load('http://www.youtube.com/embed/yv0zA9kN6L8'); return false">Load Movie 3 </a>
    				  
    </body>
    Hi xelawho,

    I like your approach to this issue. Would you have an idea of the code needed if I wanted an external link to load the page with Movie 2 playing?

    Thank you!


  •  

    Tags for this Thread

    Posting Permissions

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