如何制作下一个和上一个按钮来来回切换 iFrame 页面？答案

【问题标题】：How to Make Next and Previous Buttons to Switch iFrame Pages back and forth?如何制作下一个和上一个按钮来来回切换 iFrame 页面？
【发布时间】：2016-10-26 01:13:10
【问题描述】：

我制作了静态电子书，当我单击链接时，它会在 iFrame 中打开 html 页面。再次，它不是动态页面。

我创建了下一个和上一个按钮，打算这样工作：

当“pages/1.html”页面显示时，我点击Next按钮，它会显示“pages/2.html”页面iframe。

当我看到“pages/2.html”并点击Previous按钮时，它会在 iframe 中显示“pages/1.html”。依此类推。

我不想在我拥有的任何 iframe 页面上添加这些按钮，而是在 main 页面上制作两个按钮 ONLY 将指向下一页和上一页在 iframe 上。

这是一个简单的代码：

<div id="menu">
 <ul>
    <li><a class="link" href="./pages/1.html" target="content">Link 1</a></li>
    <li><a class="link"  href="./pages/2.html" target="content">Link 2</a></li>
    <li><a class="link"  href="./pages/3.html" target="content">Link 3</a></li>
    <li><button onclick="next()">Next Page</button></li>
    <li><button onclick="previous()">Previous Page</button></li>
 </ul>
 </div>

而 javascript 是：

var pNum=1; 
var maxPage=100; 
function next(){ 
pNum++; 
if (pNum > maxPage) pNum=1; 
document.getElementById("zoome").src="page"+pNum+".htm"; 
} 
function previous(){ 
pNum++; 
if (pNum > maxPage) pNum=1; 
document.getElementById("zoome").src="page"+pNum+".htm"; 
}

这是一个实时代码：JSFIDDLE

现在，当我单击按钮时，我得到一个错误页面，它没有将我转发到任何页面。

另外，并不是说在 JSfiddle 它甚至没有转发到下一页，因为该页面当然不存在。

有什么建议吗？

【问题讨论】：

仅供参考：两个按钮的onclick 设置为next()
另见window.history.back() and window.history.forward()
你能给我完整的代码示例吗？
其实我看错了你的问题。那是行不通的。
您的小提琴也设置错误，javascript 设置为在页面加载时运行，因此下一个和上一个函数不是全局的。将其更改为 No-Wrap 并再次运行它，它就像您编写的那样工作。

标签： javascript jquery html iframe

【解决方案1】：

因为您没有在小提琴中提供我们如何尝试模拟分页的示例。我在网上搜索并找到了一个站点，其中的文章由 id 分隔，类似于您的场景。

我专注于下一个和上一个功能。 url 显然与您提供的不同，但您可以根据需要轻松调整。

请参考下面的sn-p看看是不是你需要的：

var pNum = 1;
var maxPage = 100;

document.getElementById("currentPage").innerHTML = pNum;
document.getElementById("pages").innerHTML = maxPage;

this.next = function() {
  pNum++;
  if (pNum > maxPage) pNum = 1;
  document.getElementById("zoome").src = "https://www.infoq.com/articles/" + pNum;  
  document.getElementById("currentPage").innerHTML = pNum;
}

this.previous = function () {
  pNum--;
  if (pNum < 1) pNum = 1;
  document.getElementById("zoome").src = "https://www.infoq.com/articles/" + pNum;
  document.getElementById("currentPage").innerHTML = pNum;
}

<iframe id="zoome" height="150px" width="400px" allowfullscreen="" frameborder="0" border="0" src="https://www.infoq.com/articles/1"></iframe>

<div id="menu">
  <ul>
    <li>
      <button onclick="next()">Next Page</button>
    </li>
    <li>
      <button onclick="previous()">Previous Page</button>
    </li>
    <li>
      Page <span id="currentPage"></span> / <span id="pages"></span>
    </li>

  </ul>
</div>

【讨论】：

好的。我会检查的
不能让它工作。我做到了：jsfiddle.net/rami7250/03ukzz2o 但没有成功。在 iframe 上什么都看不到，当我单击下一个或上一个时没有任何变化。
我在上面 sn-p 中的示例有效。如果您尝试访问coreneto.com/delete/pages/1.html，它将给出 403 Forbidden。您需要使您的目录可浏览。
由于我的 VPS 服务器受到严重攻击，我的访问者仅限于美国和加拿大
不知何故，当我单击下一个按钮并单击另一个按钮 - 下一个按钮停止效果

【解决方案2】：

更准确的是：

var pNum=1; 
var maxPage=100; 
function next(){ 
pNum++; 
if (pNum > maxPage) pNum=1; 
document.getElementById("zoome").src="./pages/"+pNum+".html"; 
} 
function previous(){ 
pNum--; 
if (pNum > maxPage) pNum=1; 
document.getElementById("zoome").src="./pages/"+pNum+".html"; 
}

这里是JSfiddle

现在它可以工作了，因为我将 ".htm" 更改为 ".html"

和src（在javascript中）到"./pages/"和iframe的src到src="./pages/0.html"

【讨论】：

【解决方案3】：

我试过that method：

<script type="text/javascript">
var pages=new Array();

pages[0]="./pages/0.html";
pages[1]="./pages/1.html";
pages[2]="./pages/2.html";
pages[3]="./pages/3.html";
pages[4]="./pages/4.html";

var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
  document.getElementById('zoome').src=pages[end];
  i=0;}
else {
  document.getElementById('zoome').src=pages[i];
  i++;}}
if (operation=="back") {
if (i==0) {
  document.getElementById('zoome').src=pages[0];
  i=end;}
else {
  document.getElementById('zoome').src=pages[i];
  i--;}}}
</script>

有同样的问题：当点击更改 iframe 的菜单上的链接时，脚本停止工作。但！我看到有人在那里给出的解决方案，但我不明白他是如何实施的。

这是他的答案：

这是你可以放在 changeSrc 函数之前的函数：

function UpdateI(value) {i = value}

这是您将添加到链接中的一键式事件标签。当然，在这种情况下发送函数的 4 会更改为适合任何 ListItem 的任何内容参考：

onClick ="UpdateI(4)"

我如何实现他建议的方法？

【讨论】：

【解决方案4】：

我通过 Here 的 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>

完美工作！！

【讨论】：