Перейдите на новую страницу html и измените img src на этой новой странице

Question

У меня есть html-страница с несколькими ссылками на другую, я хочу изменить ссылки на целевую страницу в зависимости от того, какой пользователь нажимает. Важно отметить, что ссылка находится внутри iframe и вызывает загрузку iframe src на целевой странице.

//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 Обновленный код Plinkr, чтобы показать новый код, благодаря ссылке ICKE в.

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

Не работает правильно как булевский триггер - кто знает почему?

Answer 1

Я не думаю, что можно использовать JS на странице B, чтобы изменить что-то на страницу A. (Если, как указывал Cristy в комментариях к вашему вопросу, есть и другие компоненты, участвующие)

Предполагая, что вы можете редактировать исходный код обеих страниц, одна идея будет использовать строки запроса в ссылках на странице B:

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

И затем использовать JS на странице A, чтобы установить src атрибут:

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'; 

getParameterByName функция не моя, но взято отсюда: https://stackoverflow.com/a/901144/1389366