Question

如果我使用错误的术语或者这很明显可以解决，请提前道歉。我正在努力扩展这一点;

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

允许多个src链接加载不同的按钮，如下所示 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>

我已将第一个链接放入iframe元素（？），因为我希望页面以加载到iframe中的页面开头。

我正在使用它为图库加载图片，其中我还使用toggle_visibility来显示/隐藏按钮所放置的类别以及iframe链接到页面内的jQuery缩放脚本。该脚本可以正常工作从page1.html加载到另一个（即page2.html），并且似乎与其他缩放或切换脚本不冲突。

Answer 1

HTML ID必须唯一

将您的HTML更改为，将this调用者对象传递给方法

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

JS方法

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

DEMO，在演示简单警报按钮值

修改

Aboove可以使用，但我建议您不要使用像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

iframe中的SetSrc，包含多个链接到多个源

1 个答案:

修改