Question

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

我希望有一些按钮可以更改显示iframe的{{1}}的src参数。例如，当我点击pdf file时，我想在button 2中显示pdf2。

这是我在html中的内容：

iframe

这是我所包含的单独<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

Answer 1

以下是实现目标的两种方法：

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

代码段中的两个示例都在评论中包含详细信息。在代码段中使用iframe可能会超时。如果是，请查看PLUNKER

段

＆＃13;

<!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>

＆＃13;

Answer 2

更改src属性就足以让您无需重新加载iframe。

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

2 个答案:

段