使用按钮动态更改 iframe 中显示的 pdf。 Javascript答案

【问题标题】：Dynamically change the pdfs shown in iframe using a button. Javascript使用按钮动态更改 iframe 中显示的 pdf。 Javascript
【发布时间】：2016-09-27 16:47:00
【问题描述】：

您好，我正在使用 bootstrap 构建一个简单的网站。

我想要一些按钮来改变我的iframe 的src 参数，它显示pdf file。例如，当我点击button 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>

这在我包含的单独的js 文件中。如果我犯了一些非常明显的错误，请不要那么难，因为我是新手。我尝试使用我在此处找到的一些功能来强制重新加载网站。它不起作用

$(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);
    });
});

【问题讨论】：

标签： javascript jquery pdf iframe

【解决方案1】：

这里有两种方法可以实现您的目标：

使用 jQuery，仅使用一行 3 个按钮和 data-* 属性。
仅使用 HTML。

Snippet 中的两个示例在 cmets 中都有详细信息。在 Snippet 中使用 iframe 可能会超时。如果是这样，请查看PLUNKER

片段

<!DOCTYPE html>
<html>

<head>
  <title>01</title>
  <meta charset="UTF-8">
  <style>
    iframe {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .embed-responsive {
      width: 80vw;
      min-height: 600px;
      overflow: auto;
    }
    .panel {
      margin: 20px;
    }
  </style>
</head>

<body>
  
  <fieldset class="btn-group" role="group">
    <legend>Button with `data-*` Attribute Sets `src` of iframe with jQuery</legend>
    <button id="1" type="button" class="btn btn-default" data-lnk="http://book-library.info/file/modal-iframe-javascript.pdf">Report 1</button>
    <button id="2" type="button" class="btn btn-default" data-lnk="https://mtyiu.github.io/csci4140-spring15/tutorials/6/youtube-iframe-api.pdf">Report 2</button>
    <button id="3" type="button" class="btn btn-default" data-lnk="http://www.gtupw.org/articles/attachments/1358398740.pdf">Report 3</button>
  </fieldset>

  <!--This technique involves only HTML. 
Setup an anchor:
    href={{value to be transfered to iframe's src}}
    target={{value of iframe's name attribute}}
Setup iframe:
    name={{value of iframe's name; best practice is to set id and name the same value}}
-->
  <fieldset class="btn-group panel" role="group">
    <legend>Anchor Links with `target` to iframe's `name` Attribute Sets `src` of iframe| HTML Only</legend>
    <a href="http://book-library.info/file/modal-iframe-javascript.pdf" id="1" type="a" class="btn btn-default" target="iframe">Report 1</a>  <a href="https://mtyiu.github.io/csci4140-spring15/tutorials/6/youtube-iframe-api.pdf" id="2" type="a" class="btn btn-default"
    target="iframe">Report 2</a>  <a href="http://www.gtupw.org/articles/attachments/1358398740.pdf" id="3" type="a" class="btn btn-default" target="iframe">Report 3</a>
  </fieldset>
  
  <div class="embed-responsive embed-responsive-16by9">
    <iframe id="iframe" name="iframe" class="embed-responsive-item" src="http://book-library.info/file/modal-iframe-javascript.pdf"></iframe>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
    /*
	Delegate the click event to all the buttons at once.
	*/
      $(".btn").on('click', function() {
        /*
		Directly set iframe's src with the value of the 
		clicked button's (this or e.target) data-lnk.
		*/
        $("#iframe").attr("src", $(this).attr("data-lnk"));
      });
    });
  </script>
</body>

</html>

【讨论】：

【解决方案2】：

改变 src 属性就足够了，你不需要重新加载 iframe。

【讨论】：

是的，我试过没有它，但它没有用。这就是我开始挖掘的原因
异常情况，能不能为此创建jsbin？