1

我正在尝试为我的项目制作上一个/下一个按钮。这是它的精简代码。

<html>
<head>
<script>
function prevP() {var element = document.getElementById("framePage");
             element = element.src;
             elementLen = element.length;
             elementLen = elementLen-6;
             elementChar = element.charAt(elementLen)
             elementChar = --elementChar
             newElement = element.replace(element.charAt(elementLen),elementChar);
             document.getElementById("framePage").src=(newElement);}

function nextP() {var element = document.getElementById("framePage");
             element = element.src;
             elementLen = element.length;
             elementLen = elementLen-6;
             alert(elementLen);
             elementChar = element.charAt(elementLen)
             elementChar = ++elementChar
             newElement = element.replace(element.charAt(elementLen),elementChar);
             document.getElementById("framePage").src=(newElement);}
</script>
</head>
<body>
<iframe src="www.websiteendingwithnumber1.com" id="framePage"></iframe>
</br>
<input type="button" onClick="prevP()" value="Previous">
<input type="button" onClick="nextP()" value="Next">
</body>
</html>

我的项目创建了大约 40-120 个 html 页面以在 iframe 中显示。您可以使用“上一个/下一个”按钮来翻阅它们。每个页面都以最后的数字动态命名。例如 /path/mountpoint0/page/page0.html、page1.html ... page5.html 等等。我试图做的基本上是让这些函数中的每一个读取 iframe src 的当前 URL，然后根据您按下的按钮将其设置为所需的 src。基本上，如果您在第 5 页，它将分割字符串，如果您点击上一个，则将 src 设置为第 4 页，如果您点击下一个，则设置为第 6 页，等等。

一个警告！对于动态生成的 iframe HTML 文件，我还有一个动态生成的挂载点 (ramdisk)。我的项目将检测是否存在挂载点并相应地重命名为新的挂载点，IE 如果 mountpnt0 存在，则创建并使用 mountpnt1，依此类推，直到可以为止。所以！我看到的错误是它更改了挂载点上的数字，而不是 html 文件。示例 iframe.src = /tmp/prevram0/html/page0.html。我单击下一步，将我吐到一个找不到页面的错误，并试图转到 /tmp/prevram1/html/page0.html。我再次点击下一个，然后它翻转另一个数字，/tmp/prevram1/html/page1.html。所需的操作是 iframe.src = /tmp/prevram0/html/page0.html。我单击下一步，然后将 iframe.src 设置为 /tmp/prevram0/html/page1.html。

如果这令人费解或没有多大意义，我很抱歉。这个项目的大部分内容都在 python 中，我希望使用 HTML/JS 来创建我的项目的报告功能。我对 python 还很陌生，对我的方法很了解，但是 JS 对我来说是全新的，所以我为我所有的（可能的）头痛导致菜鸟错误道歉。但我真的很想要一些关于如何最好地处理这个问题的方向和指导:)

非常感谢大家！

编辑 - 快速澄清。

编辑 2 - 我要感谢大家迄今为止的大力投入！我真的，真的很感激！我现在正在处理工作中的一些事情，所以当我有机会再坐下来处理我的项目时，我会尝试你的建议，看看会发生什么:) 再次感谢大家（和女孩？）！

编辑 3 - window.onload = function(){ pageNo = 0; baseUrl = document.getElementById('+q1+'baseurl'+q1+').innerHTML; }

window.onload = function(){
lPageNo = document.getElementById('+q1+'lPageNo'+q1+').innerHTML;
}

function prevP() {
if(pageNo > 1) { pageNo--; } 
var prevEl = document.getElementById('framePage'); 
prevEl.src = baseUrl + pageNo + '.html';
}

function nextP() {
if(pageNo<lPageNo) { pageNo++; }
var nextEl = document.getElementById('framePage');
nextEl.src = baseUrl + pageNo + '.html';
}

<span id="baseurl" style="display:none;">'+prevram+'/html/page</span>

<span id="lPageNo" style="display:none;">'+str(ptit)+'</span>

（prevram、q1 和 ptit 是我的 python 脚本中的 python 变量。prevram 是挂载点，ptit 是页码计数器。q1 是单引号。）

4

2 回答 2

1

JavaScript 的 String.replace()方法搜索源字符串以查找您在第一个参数中传递的任何内容。如果第一个参数是一个字符串，那么它只会替换它的第一个实例。如果第一个参数是正则表达式，您可以进行更复杂的模式匹配和全局替换。如果第二个参数是一个函数，您可以进行更复杂的替换：将为每个匹配调用该函数，允许您处理每个匹配，但您认为合适并返回替换值 - 这非常适合您想要的情况增加或减少一个数字。

试试这个：

function prevP() {
    var element = document.getElementById("framePage");

    element.src = element.src.replace(/(\d+)(.html$)/,
                                  function(m,p1,p2){ return (+p1) -1 + p2; });
}
function nextP() {
    var element = document.getElementById("framePage");

    element.src = element.src.replace(/(\d+)(.html$)/,
                                  function(m,p1,p2){ return (+p1) +1 + p2; });
}

我使用的正则表达式会查找.html源字符串末尾的数字，因此在您的情况下，如果使用格式为字符串的字符串，它只会/tmp/prevram0/html/page0.html找到第二个. 第二个参数中的回调使用一元加运算符将数字字符串转换为数字，对其进行减法或加法运算，然后将位放回原处。0.html

请注意，这不会进行任何范围检查，因此即使已经为 0，它也会继续尝试前进。

演示：http: //jsfiddle.net/3VFvz/

关于您的代码的其他一些提示：

  • 除了 之外element，您的所有变量都是全局的，因为它们没有在语句中var声明。
  • .charAt()返回一个字符串，因此在结果上使用运算符没有意义--。
  • 您可以说elementLen = element.length - 6，您不需要将这-6部分作为单独的声明。
  • 将函数体的第一行放在之后的行上是一种更正常的 JS 样式{，并将函数的结束}放在自己的行上 - 可能除了我上面的完全在一行上的非常短的函数回答。
于 2012-11-02T03:48:04.390 回答
0

假设您的挂载点由服务器确定，我会这样尝试：隐藏包含基本字符串的页面中的元素：

<span id="base" style="display:none;">/tmp/prevram0/html/page</span>

然后将处理程序绑定到加载事件以获取该信息：

window.onload= function ()
{
    baseString = document.getElementById('base').innerHTML;
    document.getElementById('framePage').src = baseString + pageNo + '.html';

}

其中 baseString 是在代码中某处定义的变量，这些函数可以全局访问。pageNo 是另一个使用初始页码预定义的变量。

然后上一页功能：

function PrevP()
{
    if(pageNo > 1)
    {
         pageNo--;
    }
    var el = document.getElementById('framePage');
    el.src = baseString + pageNo + '.html';
}

下一页功能您只需添加 pageNo 并执行相同的操作：

function NextP()
{
    if(pageNo<lastPageNo)
    {
          pageNo++;
    }
    var el = document.getElementById('framePage');
    el.src = baseString + pageNo + '.html';
}
于 2012-11-02T06:43:56.203 回答