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

【问题标题】：Add PREV and NEXT to an HTML5 Page That's Using IFrame将 PREV 和 NEXT 添加到使用 IFrame 的 HTML5 页面
【发布时间】：2014-11-19 18:25:50
【问题描述】：

我有一个 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 链接也是如此。

任何帮助将不胜感激。

【问题讨论】：

标签： html

【解决方案1】：

使用 Javascript 函数 incrementId() 解决了这个问题，该函数已发现存在于 stackoverflow 本身的其他位置。我克隆了这个并稍微调整为decrementId。这些函数接受一个参数（如：“news-pg1”）并递增到可以附加“.html”的 news-pg2 等等，然后加载带有 html 内容的 iframe。为列表标签添加了一个点击事件处理程序。添加了两个函数 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>

【讨论】：