单个按钮如何按顺序加载到iframe中

在加载时，另一个脚本将文件加载到iframe中。该文件命名为abcdx.html，其中x为一个数字，并且与此页面相同的目录中。如果将ABCD1.html加载到iframe中，则按下按钮应加载ABCD2.HTML，然后是ABCD3.HTML等。

我已经尝试过，但是按钮什么也不做：

<html>
<head>
    <script>
    turnRight = function() {
        var srcurl = document.getElementByName("content").src.charAt(4);
        var pagenum = parseInt(srcurl, 10) + 1;
        if (pagenum < 4) {
            document.getElementByName('content').src='abcd' + pagenum + '.html';
        }
        else {
            pagenum = 1;
            document.getElementByName('content').src='abcd' + pagenum + '.html';
        }
    };  
    </script>
</head>
<body>
    <div onclick="turnRight()"></div>
    <iframe name="content" id="content">
</body>
</html>

编辑：使用JAN的建议，我的原始代码和另一个堆栈线程，我构建了此内容，并按定义工作，包括URL读数：

let turnRight = function() {
    var frameUrl = document.getElementById('content').contentWindow.location.href;
    var cutoff = frameUrl.substr(frameUrl.length - 6);
    var pageNumber = parseInt(cutoff.charAt(0), 10);
    var maxPageNumber = 4;
    pageNumber = (pageNumber % maxPageNumber) + 1;
    document.getElementById('content').src = 'abcd' + pageNumber + '.html';
};

默认情况下不存在方法getElementByName。您可以将getElementByName更改为 getElementById来查询iframe-object。从iframe的SRC中获取当前的页面数也不是最好的主意，因为该信息的位置/索引可能会有所不同。您可以在一个额外的变量中跟踪当前的Pagenumber。您也不需要IF-Else块即可重置Pagenumber，一旦达到最大值，Modulo就可以实现。

。

这是一个示例，其中提到了您的原始代码：

let pageNumber = 0;
let maxPageNumber = 4;
let turnRight = function() {
    pageNumber = (pageNumber % maxPageNumber) + 1;
    document.getElementById("content").src = 'abcd' + pageNumber + '.html';
};

我将在转弯函数外保持一个变量，该变量将节省当前计数，从1开始。iframe。

举例说明：

var count = 1;
var baseUrl = 'abcd#.html';
var iframe = document.querySelector('iframe');
var button = document.querySelector('.button');
button.addEventListener('click', function() {
    count++;
    
    if (count > 4) {
        count = 1;
    }
    
    iframe.src = baseUrl.replace('#', count);
});

<html>
<head></head>
<body>
    <button type="button" class="button">Click!</button>
    <iframe name="content" id="content">
</body>
</html>

相关内容

最新更新

热门标签：