7

我正在尝试创建这个页面，其中我有一个 iframe，我想添加一个按钮来显示 iframe 中的下一页，以及一个按钮来显示 iframe 中的上一页。

我在名为 1.html 2.html 3.html 4.html 的 iframe 中总共显示 4 个页面，我希望按钮从 1 到 4 工作，然后返回到 1 等等。

草图是这样的：

            _________
           | IFRAME  |
           |         |
           ___________


    <<previous       Next >>

这是我用来更改 iframe 内容的简单脚本

这是 iframe / 按钮 / 功能。

<iframe id="screen" width="609" scrolling="no" height="410" frameborder="0" align="middle" name="canal" src="1.html"></iframe>


<input type="button" onclick="content2()" class="butonactual" value="See 2">

<script> function content2() { document.getElementById('screen').src = "2.html"; } </script>

谢谢

4

3 回答 3

4

使用 jQuery

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  var locations = ["1.html", "2.html", "3.html","4.html"];
  var currentIndex = 0;
  var len = locations.length;
  $(document).ready(function(){
    $(':button').click(function() {
        currentIndex = this.value == "Next" ? 
                currentIndex < len - 1 ? ++currentIndex : len - 1 : 
                currentIndex > 0 ? --currentIndex : 0;
        $('#frame').attr('src', locations[currentIndex]);
    });
  });
</script>
</head>
<body>
<input type = "button" value = "Previous" />&nbsp;<input type = "button" value = "Next" />
<br />
<iframe id="frame" src="1.html"></iframe>
</body>
</html>

■更新

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      var locations = ["1.html", "2.html", "3.html","4.html"];
      var currentIndex = 0;
      var len = locations.length;
      $(document).ready(function(){
        $(':button').click(function() {
            currentIndex = this.value == "Next" ? 
                currentIndex < len - 1 ? ++currentIndex : 0 : 
                currentIndex > 0 ? --currentIndex : len - 1;

            $('#frame').attr('src', locations[currentIndex]);
        });
      });
    </script>
  </head>
  <body>
    <input type = "button" value = "Previous" />&nbsp;<input type = "button" value = "Next" />
    <br />
    <iframe id="frame" src="1.html"></iframe>
  </body>
</html>
于 2013-10-06T03:21:40.483 回答
1

不是太难，只是改变iframe的src标签。假设以下是您的 html：

<body>
    <!-- Assuming 1.html is the first shown, you can
         initialize it as the first src to be displayed -->
    <iframe id="frame" src="1.html"></iframe>

    <a href="#" id="prev">Previous</a> <a href="#" id="next">Next</a>
</body>

然后，您可以按照以下说明进行操作：

jQuery

var currentView = 1,
    minView     = 1,
    maxView     = 4;

var changeViewNext = function() {
    if (currentView >= minView && currentView < maxView) {
        currentView++;
        $('#frame').prop('src', currentView + '.html');
    }
}

var changeViewPrev = function() {
    if (currentView <= maxView && currentView > minView) {
        currentView--;
        $('#frame').prop('src', currentView + '.html');
    }
}

// Then some click events
$('#prev').click(function(e) {
    e.preventDefault();
    changeViewPrev();
}); 

$('#next').click(function(e) {
    e.preventDefault();
    changeViewNext();
})

或者，只需将标记添加到您的锚标记以调用这些函数：

<a href="#" onClick="changeViewPrev()">Previous</a>
<a href="#" onClick="changeViewNext()">Next</a>

更新

如果您想使用按钮而不是锚标签，请保持 jQuery 不变，只需更改按钮的锚标签，就像这样

<button id="prev">Previous</button> <button id="next">Next</button>

UPDATE2：仅使用 javascript 测试代码，没有 jQuery

<body>
    <!-- Assuming 1.html is the first shown, you can
         initialize it as the first src to be displayed -->
    <iframe id="frame" src="1.html"></iframe>

    <button onClick="changeViewPrev()">Previous</button>
    <button onClick="changeViewNext()">Next</button>
    <script>
        var currentView = 1,
            minView     = 1,
            maxView     = 4,
            frame       = document.getElementById('frame');

        function changeViewNext() {
            if (currentView >= minView && currentView < maxView) {
                currentView++;
                frame.src = currentView + '.html';
            }
        }

        function changeViewPrev() {
            if (currentView <= maxView && currentView > minView) {
                currentView--;
                frame.src = currentView + '.html';
            }
        }
    </script>
</body>
于 2013-10-06T02:28:44.813 回答
0

如果我理解这个问题，那么您有 4 个网址并且使用的是单个 iframe。如果是这种情况，请使用一个数组来存储 url 和一个计数器（它是数组的索引）。按下下一个时，递增计数器并切换 iframe url。Previous 递减计数器并执行相同操作。

于 2013-10-06T02:25:24.803 回答