0

I have an html page with several links to another, I want to change image references on the landing page depending on the a href the user clicks. An important note is that the link is from inside an iframe and calls an iframe src to be loaded in the landing page.

//html page B
    // inside an iframe
        <a target="_parent" href="../gfx.html?content/more.html">this page</a>
//html page A
    // buttons outside iframe
    <img id="btn1" src="btn1.png" />
    <img id="btn2" src="btn2.png" />
        // then an iframe below

http://plnkr.co/edit/Mr40BpnbF8aYkhMtq5qf Updated the Plinkr code to show the new code thanks to icke's link.

var cdirec = getParameterByName('check');
if (cdirec) {
    document.getElementById("bt1").src = "img/bt1.png";
    document.getElementById("bt4").src = "img/bt4-2.png";
}

Doesn't function correctly as a boolean trigger - anyone know why?

Pat C
  • 13
  • 3
  • You have to include the JavaScript on that page. You can not make one page execute JavaScript on another page, unless you we are talking about `iframes`. – XCS Jan 20 '15 at 08:53
  • 1
    Have you noticed that your id is `bt1` and you're calling JS on `btn1` ? – saruftw Jan 20 '15 at 08:59

1 Answers1

0

I don't think it is possible to use JS on page B to change something on page A. (Unless, as pointed out by Cristy in the comments to your question, there are other components involved)

Assuming you can edit the source of both pages, one idea would be to use query strings in the links on page B:

<a href="pageA.html?button=btn1"> click</a>
<a href="pageA.html?button=btn2"> press</a>

And then use JS on page A to set the src attribute:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

[...]

document.getElementById('bt1').src=getParameterByName('button')+'.png';

The getParameterByName function is not mine, but taken from here: https://stackoverflow.com/a/901144/1389366

Community
  • 1
  • 1
icke
  • 1,568
  • 1
  • 19
  • 31
  • This looked hopeful but I'm already using a query string to access a specific iframe src on the landing page. See my updated post :) – Pat C Jan 21 '15 at 00:19
  • Couldn't you just add another parameter? Like `href="../gfx.html?src=content/more.html&button=btn1"` and then extract the info you need to access your iframe src with `getParameterByName` as well? – icke Jan 21 '15 at 06:45
  • An issue is that I need to change multiple buttons (so that one turns on and the others are reset to default) - how can I use this method and activate a boolean to trigger the Javascript? – Pat C Jan 22 '15 at 12:58
  • I'm not sure I understand. You mean like `var bool=getParameterByName('button')=='btn1';`? – icke Jan 22 '15 at 13:57
  • Oh yeah something like that maybe. Send a string to equality check. Then how do I use that bool to call a function? Something like `if (bool) { func() }` just underneath the var declaration? – Pat C Jan 23 '15 at 01:40
  • That should work. Make sure that code is executed *after* the document has been loaded, otherwise you may not be able to access the buttons and other elements. So either put the script at the bottom of the page or (better) bind it to a "document ready" handler. – icke Jan 23 '15 at 08:46