如何制作下一个和以前的按钮来回切换iframe页面

我制作了静态电子书，当我单击链接时，它会在iframe.again中打开html页面。

我在打算这样工作的下一个和以前的按钮创建了：

显示"页面/1.html"页面时，我单击 next 按钮，它将显示"页面/ 2.html "页面 iframe 。

当我看到"页面/2.html"并单击上一个按钮时，它将在IFRAME上显示"页面/ 1.html "。等等，遵循上下数字。

我不想在我拥有的任何iFrame页面上添加这些按钮，但是要在 main 页面上进行两个按钮，该按钮将直接直接直接转到下一个页面和上一个页面在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中甚至没有转发到下一页，因为页面不存在。

有什么建议？

，因为您没有在小提琴中提供一个示例，即我们如何尝试模拟分页。我搜索了网络，找到了一个网站，该网站的文章被ID分开，类似于您的情况。

我专注于下一个功能和上一个功能。URL显然与您提供的URL不同，但是您可以轻松地将其调整为您的需求。

请，请参阅以下片段，看看是否需要：

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>

我从>此处通过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>

工作完美！

更准确的是：

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 to src="./pages/0.html"

我尝试了：

<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的菜单上的链接时，脚本停止工作。但！我看到有人在那里提供的解决方案，但我没有得到他的实施方式。

这是他的答案：

这是您可以在更改函数之前放置的功能：
function UpdateI(value) {i = value}
这是您将在A中添加到链接的单击事件标签。当然，在这种情况下发送函数的4个将更改为适合任何ListItem的事物引用：
onClick ="UpdateI(4)"

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

相关内容

最新更新

热门标签：