使用按钮动态更改iframe中显示的PDF。Javascript

嗨，我正在建立一个简单的网站使用引导

我希望有一些按钮，可以更改显示

pdf文件的
iframe
的src参数。例如，当我单击
按钮2
时，我想在
iframe
中显示
pdf2

以下是我在html中的内容：

<div class="btn-group" role="group" >
  <button id="1" type="button" class="btn btn-default">Report 1</button>
  <button id="2" type="button" class="btn btn-default" >Report 2</button>
  <button id="3" type="button" class="btn btn-default">Report 3</button>
</div>

<div class="embed-responsive embed-responsive-16by9">
  <iframe id="iframe" class="embed-responsive-item" src="reports\Report1.pdf"></iframe>
</div>

更改src属性就足够了，您无需重新加载iframe。
以下是实现目标的两种方法：

使用jQuery时，仅使用一行3个按钮和
data-*
属性
只使用HTML
代码段中的两个示例在注释中都有详细信息。
在代码段中使用iframe可能会超时。如果是，请查看

一小条


01
iframe{
宽度：100%；
身高：100%；
溢出：自动；
}
.嵌入响应{
宽度：80vw；
最小高度：600px；
溢出：自动；
}
.小组{
利润率：20px；
}
带有'data-*`属性的按钮设置了带有jQuery的iframe的'src'
报告1
报告2
报告3
带有'target'的锚链接到iframe的'name'属性集'src'（仅限iframe | HTML）
$（文档）.ready（函数（）{
/*
一次将单击事件委托给所有按钮。
*/
$（“.btn”）。在（'click'，function（）上{
/*
直接将iframe的src设置为
单击按钮的（此或e.target）数据lnk。
*/
$（“#iframe”）.attr（“src”），$（this.attr（“数据lnk”）；
});
});
是的，我试过不用它，但没用。这就是我开始挖掘异常情况的原因，你能为此创建jsbin吗？
$(document).ready(function(){

    $("#1").click(function(){

        $("#iframe").attr("src", 'reports\Report1.pdf'); 
        $("#iframe").contentWindow.location.reload(true);
    });

    $("#2").click(function(){

        $("#iframe").attr("src", 'reports\Report2.pdf'); 
        $("#iframe").contentWindow.location.reload(true);
    });

    $("#3").click(function(){

        $("#iframe").attr("src", 'reports\Report3.pdf'); 
        $("#iframe").contentWindow.location.reload(true);
    });
});