根据不同的按钮点击打开不同的 iframe答案

【问题标题】：Opening different iframe depending on different button click根据不同的按钮点击打开不同的 iframe
【发布时间】：2014-10-15 23:09:04
【问题描述】：

我正在尝试通过将 iframe src 分配给变量来打开不同的 iframe 窗口，当页面最初加载时，它应该在页面上只显示两个按钮，当我单击按钮时，应该根据按下哪个按钮来加载 iframe，我尝试做这样的事情来创建按钮和创建 iframe，但它是不工作

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="whatnext">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x = "Hello!";
function showX() {
    var whatnext;
    if b1.onclick==true
        whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;"
        elseif b2.onclick=true
        whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 555px; margin-left: -116px; margin-top: -25px; width: 330px;"
}
</script>
and another piece of trial is
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="x" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x ;
function showX() {
    src="https:http://stackoverflow.com";
}
b1.onclick = function() {
    x = "http://stackoverflow.com;
    showX();
};
b2.onclick = function() {
    x = "www.sitepoint.com";
    showX();
};
</script>

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

您只需要在点击时更改 iframe 的 src 属性。我将 src 添加到使用数据属性的按钮中。这是示例http://jsfiddle.net/8wLm42ns/2/ HTML

    <button class="loadiframe" id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button>
<button class="loadiframe" id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button>

<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">

jQuery

$('.loadiframe').on('click', function(){
    var src = $(this).data('src'),
        width = $(this).data('width'),
        height = $(this).data('height');
    $('#frame').css({
        width: width,
        height: height
    }).attr('src', src);
});

对于 javascript 解决方案，试试这个http://jsfiddle.net/8wLm42ns/3/

HTML

<div class="loadiframe">
    <button id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button>
    <button id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button>
</div>
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">

javaScript - 添加到 head 部分

function iframeChange() {
    var buttons = document.querySelector(".loadiframe"),
        iframe = document.getElementById('frame');

    buttons.addEventListener("click", function (e) {
        iframe.src = e.target.dataset.src;
        iframe.width = e.target.dataset.width;
        iframe.height = e.target.dataset.height;
    });
}
window.onload = iframeChange;

【讨论】：

感谢兄弟的大力帮助........我很长一段时间都在努力解决这个问题
你好 bojan ，解决方案很棒，但这个脚本仍然没有提供的一件事是为不同的按钮点击制作不同的 iframe 结构，每个按钮正在加载不同的 iframe，但 iframe 的大小也必须两个按钮都不同，例如。对于第一个按钮，点击 ifra 应该加载 width = 500 和 height = 400 ，但是对于下一个按钮点击它应该是 widht = 650 和 height = 350
你是用jQuery还是javascript？
我可以使用任何一个我对使用 jquery 或 javascript 没有任何限制，但我认为理解 javascript 对我来说会更容易，如果可能的话，您可以使用这两种方法扩展解决方案也会对我和社区更有帮助
@user1597336 我已经更新了我的答案以包括不同的宽度和高度:)

【解决方案2】：

试试这个解决方案，点击一个按钮，将网页加载到特定的 iframe 上，不需要 jquery。

这里是JSBIN http://jsbin.com/gebelatomiya/1/

<!doctype html>
<html>
<head>
<script>
function loadFrame (elm){
    var frame1 = document.getElementById('frame1');
    frame1.src = elm.dataset.src;
}
</script>
</head>
<body>
    <button id="b1" data-src="http://www.w3schools.com" onClick="loadFrame(this)">Button 1</button>
    <button id="b2" data-src="http://www.sony.com" onClick="loadFrame(this)">Button 2</button>
    <iframe id="frame1" scrolling="no"></iframe>
</body>
</html>

【讨论】：

非常感谢 gibbok，这两个代码都在工作，我将尝试两者并查看页面加载，无论哪个加载速度更快，我都会使用它，但感谢让社区知道新的方法做同样的事情
@user1597336 很高兴为您提供帮助！