Question

我制作了静态电子书，当我点击一个链接时，它会打开iFrame.Again中的html页面，它不是动态页面。

我创建了Next和Previous Buttons，打算像这样工作：

当显示“pages / 1.html”页面时，我点击下一步按钮，它会显示“页面/ 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

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

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

请参阅以下代码段，看看它是否符合您的要求：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 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"

Answer 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}

这是您要添加到a中链接的单击事件   标签。当然，在这种情况下发送函数的4会   被改为任何适合ListItem的东西   引用：

onClick ="UpdateI(4)"

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

Answer 4

我通过jquery从 Here 开始工作：

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

工作完美!!

如何使下一个和上一个按钮来回切换iFrame页面？

4 个答案: