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

Question

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

我创建了“下一个”和“上一个”按钮，目的是像这样工作:

当显示“pages/1.html”页面时，我单击下一步按钮，它将显示“pages/2.html”页面iframe。

当我看到“pages/2.html”并单击上一页按钮时，它会在 iframe 上显示“pages/1.html”。依此类推，按照数字向上和向下。

我不想在我拥有的任何 iframe 页面上添加这些按钮，而是在主页面上仅添加两个按钮，以直接指向下一页和上一页在 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 中它甚至不会转发到下一页，因为该页面当然不存在。

有什么建议吗？

Answer 1

因为您没有在 fiddle 中提供我们如何尝试模拟分页的示例。我在网上搜索发现一个网站，其中有由 id 分隔的文章，与您的情况类似。

我专注于下一个和上一个功能。该网址明显与您提供的网址不同，但您可以轻松地根据您的需要进行调整。

请参阅以下代码片段，看看是否是您所需要的:

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>