create previous next button for iframe pages

问题

This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible...

So I have this code...

<script type="text/javascript">
var pages=new Array();

pages[0]="listItem1.html";
pages[1]="listItem2.html";
pages[2]="listItem3.html";
pages[3]="listItem4.html";
pages[4]="listItem5.html";

var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
  document.getElementById('the_iframe').src=pages[end];
  i=0;}
else {
  document.getElementById('the_iframe').src=pages[i];
  i++;}}
if (operation=="back") {
if (i==0) {
  document.getElementById('the_iframe').src=pages[0];
  i=end;}
else {
  document.getElementById('the_iframe').src=pages[i];
  i--;}}}
</script>
</head>

<body>

<ul id="menu" role="group">

<li><a href="listItem1.html" target="ifrm" role="treeitem">Welcome</a>
  <ul>
    <li><a href="listItem2.html" target="ifrm" role="treeitem">Ease of Access Center</a></li>
  </ul>
</li>    

<li><a href="listItem3.html" target="ifrm">Getting Started</a>
  <ul>      
    <li><a href="listItem4.html" target="ifrm">Considerations</a></li>
    <li><a href="listItem5.html" target="ifrm">Changing Perspective</a></li>
  </ul>
</li>
</ul>


<iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe>


<input type="button" onClick="changeSrc('back');" value="Back" />
<input type="button" onClick="changeSrc('next');" value="Next" />

and if I click on the next or prev button, it does move somewhere,but...

let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3).

It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5.

Many Thanks For Any Help!

回答1:

Okay, I'll try the code, but don't down-rate it if its off.

This is the function that you could put before the changeSrc function:

function UpdateI(value) {i = value}

This the one click event that you would add to your links in the a tag. Off course, the 4 that is sent the function in this case, would be changed to whatever is appropriate for whatever ListItem is being referenced:

onClick ="UpdateI(4)"

Does this help you?

回答2:

I don't understand your code here:

document.getElementById('the_iframe').src=pages[i]; i++;

If that is going to advance to the next element AND display it, you need to increase i first. Perhaps I'm just missing something, though.

I think your problem is that if the user clicks one of your direct links, rather than "next" and "previous" i in your code is not getting updated. So if your on page 2 and click the link for 4 and then click back, i is currently 2 and not 4. Hope that helps you. Be sure mark it as the answer if it does.

回答3:

add an on click event to each of the link tags that would call a single function just like you have in the input tags. Have the function take an input of some number and assign that number to i. That should do it. Sorry I cant show any source code, JAVASCRIPT is not my language. I can read it but I wouldn't dare to write code from scratch. Hope this helps you.

来源：https://stackoverflow.com/questions/12924715/create-previous-next-button-for-iframe-pages

标签

iframe