Question

我建立了一个网站，其中有一堆链接加载到iframe中。有一些按钮允许用户导航到列表中的下一个和上一个链接。我用它来做到这一点。

var i = 0, links = $('a').toArray();
  $('.next').click(function() {
  i++;
  if(i === links.length){ i = links.length - 1; }
  $('.frame').attr('src', links[i]);
});
//loads next link in iframe

$('.prev').click(function() {
    i--;
    if(i < 0){ i = 0; }
    $('.frame').attr('src', links[i]);
});
//loads previous link in iframe

问题是，如果用户单击第三个链接，然后单击下一个按钮，则它不会转到第四个链接，而是转到第二个链接，因为单击功能只会更改i的值默认情况下设置为0。

为解决这个问题，我想到了创建另一个变量来存储当前加载到iframe中的链接的方法，

var current = $('.frame').contents().get(0).location.href

，然后根据当前链接的索引值设置i的值，例如：

var i = links.indexOf(current)

注意：我知道

$('.frame').contents().get(0).location.href

将导致跨域错误。我正在使用的链接来自同一域，所以这不会有问题。

遗憾的是，这不起作用。有什么提示我要去哪里吗？这是一个小提琴。

JSFiddle

我只需要使用Javascript（可以使用Jquery）。请记住，由于存在大量的链接并且添加了更多的链接，因此无法选择手动插入链接来创建数组。

Answer 1

您的问题是您的i变量保留了上一个单击下一个/上一个按钮的上一个索引。您应该修复代码，以便当用户单击任何链接时，i将会更新，如下所示：

var i = 0, links = $('a').toArray();

$('.next').click(function() {
	i++;
	if(i === links.length){ i = links.length - 1; }
	$('.frame').attr('src', links[i].href); // To get the src you must get href attribute
});
//loads next lesson in iframe
$('.prev').click(function() {
	i--;
	if(i < 0){ i = 0; }
	$('.frame').attr('src', links[i].href); // To get the src you must get href attribute
});
//loads previous lesson in iframe
$('a').click(function() {
  i = links.indexOf(this);
});

.nav {
	top: 0;
	
	z-index: 2;
	width: 100%;
	background: #212121;
}
.nav button {
	font-size: 25px;
	color: white;
	padding: 10px;
	width: 100px;
  	border-color: white;
    border-radius: 8px;
  	background-color: #212121;
	margin: 5px;
}
/*nav menu buttons*/

.frame {
  	height: 50vh;
  	width: 100%;
  	border: solide white 1px;
}

body {
  	background: #212121;
  	color: white;
  	font-family: 'Nanum Gothic', 'calibri';
  	margin: 5px;
}
/*body view*/

a {
  	padding: 5px 0px 5px 30px;
	display: block;
  	font-size: 20px;
  	color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class= "nav">
  <button class="prev">Prev</button>
  <!--previous lesson button-->
  <button class="next">Next</button>
  <!--next lesson button-->
</div>

<iframe name="content" class="frame" src=""></iframe>
		
<ul>
  <li><a href="/01.html" target="content">Link 1</a></li>
  <li><a href="/02.html" target="content">Link 2</a></li>
  <li><a href="/03.html" target="content">Link 3</a></li>
  <li><a href="/04.html" target="content">Link 4</a></li>
  <li><a href="/05.html" target="content">Link 5</a></li>
</ul>

iFrame内容的下一页和上一页按钮

1 个答案: