开发者问题收集

如何制作下一个和上一个按钮来在 iFrame 页面之间切换？

2016-06-23
4333
javascript jquery html iframe

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

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

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

当我看到“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 甚至没有转发到下一页，因为该页面不存在当然。

有什么建议吗？

3个回答

因为您没有在您的 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>
n0m4d
2016-06-23

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

工作完美！！

StackBuck
2016-06-30

更准确的是： 

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"

StackBuck
2016-06-24