Question

在加载时，另一个脚本会将文件加载到iframe中。该文件名为abcdX.html，其中X是数字，并且与该页面位于同一目录中。如果在iframe中加载了abcd1.html，则按下按钮应加载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';
};

Answer 1

默认情况下，方法getElementByName不存在。您可以将getElementByName更改为getElementById来查询iframe对象。从iframe的src获取当前的页码也不是最好的主意，因为该信息的位置/索引可能会有所不同。您可以在其他变量中跟踪当前页码。您也不需要if-else块来重置页数，只要它达到最大值即可，这可以通过取模来实现。

下面是一个示例，其中提到了对原始代码的更改：

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

Answer 2

我将在turnRight函数之外保留一个变量，该变量将从1开始保存当前计数。然后，当您单击按钮时，在计数变量中添加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>

单个按钮如何按顺序将页面加载到iframe中？

2 个答案: