Question

我有一个HTML5网页，其中间有一个iframe。单击编号的链接时，iframe中会加载不同的页面。这些编号的链接位于初始HTML5页面上（iframe标记下方）。我想在带编号的链接旁边有一个有效的PREV和NEXT链接，但不知道该怎么做。

这是我到目前为止所做的：

<div>
  <nav>
    <ul>
      <li class="prev"><a href="#">&laquo; Previous</a></li>
      <li><a href="news-pg1.html" target="iframe_a">1</a></li>
      <li><a href="news-pg2.html" target="iframe_a">2</a></li>
      <li><a href="news-pg3.html" target="iframe_a">3</a></li>
      <li><a href="news-pg4.html" target="iframe_a">4</a></li>
      <li><a href="news-pg5.html" target="iframe_a">5</a></li>
      <li><a href="news-pg6.html" target="iframe_a">6</a></li>
      <li><a href="news-pg7.html" target="iframe_a">7</a></li>
      <li class="next"><a href="#">Next &raquo;</a></li>
    </ul>
  </nav>

所以我遇到的问题是我不知道如何告诉PREV链接加载以前的IFRAME和NEXT链接相同。

任何帮助都将不胜感激。

Answer 1

使用已经发现存在于stackoverflow本身的其他地方的Javascript函数incrementId（）来解决这个问题。我克隆了这个并略微调整为减量。这些函数采用一个参数（如：＆＃34; news-pg1＆＃34;）并递增到news-pg2，其中＆＃34; .html＆＃34;可以附加等等，然后加载带有html内容的iframe。添加了一个click事件处理程序来列出tag.Added两个函数SetPrev和SetNext来处理帧加载

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var f='news-pg1'; 

function newContent()     {
document.getElementById('fr_content').src =f+ ".html";
}
 function decrementId(id)     {
  // regexp is looking for text with a number suffix.  adjust accordingly.
  var numberSuffixRegExp = /(.*?)(\d*)$/;
  var regExpMatch = numberSuffixRegExp.exec(id);
  // assuming a match will be made here, and position 1 and 2 are populated.
  var prefix = regExpMatch[1];
  var counter = parseInt(regExpMatch[2]);
      if (counter > 1)
         counter--;
  return prefix + counter;
}

 function incrementId(id)     {
  // regexp is looking for text with a number suffix.  adjust accordingly.
  var numberSuffixRegExp = /(.*?)(\d*)$/;
  var regExpMatch = numberSuffixRegExp.exec(id);
  // assuming a match will be made here, and position 1 and 2 are populated.
  var prefix = regExpMatch[1];
  var counter = parseInt(regExpMatch[2]);
   if (counter     < 3)     {
       counter++;
}
  return prefix + counter;
}
function setNext()     {
try     {
f=incrementId(f);
document.getElementById('fr_content').src=f+".html";    
} catch(e)     {
ErrorHandler.handleError(e);
}
} //setNext
function setPrev()     {
f=decrementId(f);
document.getElementById('fr_content').src=f+".html";    
}
</script>
<head>
<body>
<div>
  <nav>
        <iframe id="fr_content" src="news-pg1.html" width=300 height=200>
        </iframe>
    <ul style=list-style-type: inline;>
      <li  onclick="setPrev();">    <u>Prev    </u>    </li>  
      <li  onclick="setNext();">    <u>Next    </u>    </li>  
    </ul>
  </nav>
</div>
</body>
</html>

将PREV和NEXT添加到使用IFrame的HTML5页面

1 个答案: