SetSrc in iframe with multiple links to multiple sources

Question

apologies in advanced if I use the wrong terminology or if this is obvious to solve. I'm trying to expand on this;

<script type="text/javascript">
function SetSrc() 
{
 document.getElementById("myIframe").src = document.getElementById("iframelink").value;
}
</script>

To allow multiple src links to be loaded with different buttons as in this
Html:

    <iframe id="myIframe" src="page1.html" width="900" height="600" scrolling="no"  frameborder="0"></iframe>

    <table>
    <tr>    
        <td><button value="page1.html" id="iframelink" onclick="SetSrc()"><p>image1</p><img src="thumb1.jpg" title=""/></button></td>
        <td><button value="page2.html" id="iframelink" onclick="SetSrc()"><p>image2</p><img src="thumb2.jpg"/></button></td>
        <td><button value="page3.html" id="iframelink" onclick="SetSrc()"><p>image3</p><img src="thumb3.jpg"/></button></td>
    </tr>
    </table>

I've put the first link into the iframe element(?) as I want the page to start with a page loaded into the iframe.

I'm using this to load images for a gallery in which I'm also using a toggle_visibility to show/hide categories the buttons are placed into and a jQuery zoom script within the page the iframe links to. The script as it is works fine to load from page1.html to another (i.e. page2.html) and doesn't seem to conflict with the other zoom or toggle scripts.

Can't seem to edit (just get avast pop-up saying this site is safe on hovering over edit link). I just wanted to add a 3rd button/page link to make it clear that I need it to work for more then 2 links. — trible, Feb 07 '14 at 21:01

Satpal · Accepted Answer · 2014-02-07T21:25:47.030

0

In HTML IDs must be unique

Change Your HTML as, pass this invoker object to method

  <button value="page1.html" onclick="SetSrc(this)">

JS Method

function SetSrc(obj) {
    document.getElementById("myIframe").src =obj.value;
}

DEMO, In demo simple alerts buttons value

EDIT

Aboove will work, but I suggest you to don't use inline event binding like onclick="SetSrc(this)"

HTML

<button value="page1.html" class="myButton">button1</button>
<button value="page2.html" class="myButton">button2</button>
<button value="page3.html" class="myButton">button3</button>

JavaScript

window.onload = function () {
    var elements = document.getElementsByClassName('myButton');
    for (var i = 0; i < elements.length; i++) {
        elements[i].onclick = function () {
            document.getElementById("myIframe").src =
            this.value;
        }
    }
};

DEMO

edited Feb 07 '14 at 21:25

answered Feb 07 '14 at 21:02

Satpal

132,252
13
159
168

Seems to work perfectly, I wasn't expecting it to be such a short script, thank you. – trible Feb 07 '14 at 21:06
1

it seems to work fine, but I'll wait a day to see if anyone has anything to add, thanks again – trible Feb 07 '14 at 21:14
That works too. Just to ask, is that because inline event binding/'this' would then conflict with another script if using the same term/'this' again? if it's not easy to explain to someone new to scripting no worries. – trible Feb 07 '14 at 21:39
@trible, I didn't get you. but `this` is a special keyword. In most cases, the value of this is determined by how a function is called – Satpal Feb 07 '14 at 21:45
@trible, there are couple of good articles http://stackoverflow.com/questions/3127429/javascript-this-keyword, http://www.quirksmode.org/js/this.html and http://unschooled.org/2012/03/understanding-javascript-this/. Explaining this in comment section is quite difficult – Satpal Feb 07 '14 at 21:47

SetSrc in iframe with multiple links to multiple sources

1 Answers1

EDIT