导航到新的html页面并在该新页面上更改img src

时间:2015-01-20 08:51:36

标签: javascript html html5

我有一个html页面,其中有几个指向另一个的链接,我想根据用户点击的href更改目标网页上的图像引用。 一个重要的注意事项是该链接来自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感谢icke的链接,更新了Plinkr代码以显示新代码。

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

没有正确的布尔触发器 - 任何人都知道为什么?

1 个答案:

答案 0 :(得分:0)

我不认为可以在第B页上使用JS来更改第A页上的内容。(除非Cristy在您的问题的评论中指出,还涉及其他组件)

假设您可以编辑两个页面的来源,一个想法是在第B页的链接中使用查询字符串:

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

然后在页面A上使用JS设置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