上一个/下一个Javascript字符串处理？_Javascript_Button_Iframe_Src

上一个/下一个Javascript字符串处理？

javascript button iframe

上一个/下一个Javascript字符串处理？,javascript,button,iframe,src,Javascript,Button,Iframe,Src,我正在尝试为我的一个项目制作上一个/下一个按钮。下面是它的精简代码 <html> <head> <script> function prevP() {var element = document.getElementById("framePage"); element = element.src; elementLen = element.length; elementLen = e

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

<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>


函数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=（新元素）；}
函数nextP（）{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=（新元素）；}

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

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

我很抱歉，如果这是复杂的或没有多大意义。这个项目的大部分都是python，我希望使用HTML/JS来创建我的项目的报告功能。我对python还相当陌生，对它的了解还不错，但是JS对我来说是全新的，所以我为我（可能）头痛导致的noob错误道歉。但我真的希望得到一些关于如何最好地处理这个问题的指导：）

非常感谢大家

编辑-快速澄清

编辑2-我想感谢大家迄今为止的巨大投入！我真的，真的很感激！我现在正在处理一些工作上的事情，所以当我有机会再坐下来讨论我的项目时，我会尝试一下你的建议，看看结果是什么：）再次感谢各位（还有女士们？）

编辑3- window.onload=函数（）{ pageNo=0； baseUrl=document.getElementById（'+q1+'baseUrl'+q1+'）.innerHTML； }

window.onload=function（）{
lPageNo=document.getElementById（'+q1+'lPageNo'+q1+'）.innerHTML；
}
函数prevP（）{
如果（pageNo>1）{pageNo--；}
var prevEl=document.getElementById（'framePage'）；
prevEl.src=baseUrl+pageNo+'.html'；
}
函数nextP（）{
如果（pageNoJavaScript的字符串搜索源字符串，查找在第一个参数中传递的任何内容。如果第一个参数是字符串，则它只替换它的第一个实例。如果第一个参数是正则表达式，则可以执行更复杂的模式匹配和全局替换。如果第二个参数是函数，则可以执行更多的协同操作mplicated replaces：将为每个匹配调用该函数，允许您以您认为合适的方式处理每个匹配，并返回替换值-这非常适合您希望增加或减少数字的情况
试试这个：
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
。第二个参数中的回调使用一元加号运算符将数字字符串转换为一个数字，然后减去或者向其添加1，然后将.html
位放回原处
请注意，这不会执行任何范围检查，因此即使已在0，它也会继续尝试转到上一个
演示：
关于代码的其他一些提示：

除了元素
，所有变量都是全局变量，因为它们没有在var
语句中声明
.charAt（）
返回字符串，因此对结果使用--
运算符没有意义
您可以说elementLen=element.length-6
，您不需要将-6
部分作为单独的语句来执行
更正常的JS风格是将函数体的第一行放在{
之后的一行上，并将函数的结束部分}
放在自己的一行上-可能除了我的回答中完全在一行上的非常短的函数
JavaScript的字符串搜索源字符串，查找在第一个参数中传递的任何内容。如果第一个参数是字符串，则它只替换它的第一个实例。如果第一个参数是正则表达式，则可以执行更复杂的模式匹配和全局替换。如果第二个参数是函数，则可以执行更多的comp复杂替换：将为每个匹配调用该函数，允许您以任何方式处理每个匹配
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; });
}

<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';

}

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

function NextP()
{
    if(pageNo<lastPageNo)
    {
          pageNo++;
    }
    var el = document.getElementById('framePage');
    el.src = baseString + pageNo + '.html';
}