确保页面已完全加载后,javascript单击按钮

平等

我有一个example.com网站,在这个网站上是一个ID为“ button1”的按钮,通过单击此按钮,它打开了一个带有已知按钮“ buttonOnUnknownPage”的未知网址“ example.com/unknownUrl”。如何确定未知页面已完成加载,并且可以单击“ buttonOnUnknownPage”?

注意:“ example.com”是在脚本之外的另一个窗口中打开的。也就是说,脚本在“ example.com”重新加载后不会停止运行。

到目前为止,我已经使用过:

// open example.com and get button1
exampleWindow = window.open("http://example.com", "_blank");
button1 = exampleWindow.document.getElementById('button1');

// clicking on button 1 opens example.com/unknownUrl
button1.click();

//and now wait 1000ms until page might be loaded
setTimeout(function() {
    buttonOnUnknownPage = exampleWindow.document.getElementById('buttonOnUnknownPage');
    buttonOnUnknownPage.click()
}, 1000);

问题是,我需要每次等待1000毫秒,但仍不能确定是否已加载“ example.com/unknownUrl”。

有没有更有效的方法来确保已加载“ example.com/unknownUrl”?document.onload什么?

jfriend00

当其他窗口更改位置时,对其进行监视非常复杂,其复杂性在于,每次其他窗口加载新文档时,window都会清除整个状态,并清除所有事件侦听器,并创建一个新文档。因此,您不能一次安装事件监听器并继续使用它,因为每次单击新链接并更改页面位置时,它都会被清除。

由于为特定URL创建新窗口的过程(在某些浏览器中)将首先加载一个称为URL的URL about:blank,然后加载实际URL的事实使情况更加复杂,该监视有时会检测到about:blank内部的URL,而不是您要监视的真实URL。IE(甚至是新版本)对此特别不利(不足为奇)。

因此,可以跟踪这些外部窗口的加载,但是要使其正常工作需要一些技巧。黑客入侵需要执行以下步骤:

  1. 获取窗口的原始URL(在您告诉它加载新内容之前的状态)。
  2. 等待直到该窗口的window.location.href值不再是原始URL。这表示该窗口现在已经开始加载其新的URL。
  3. 加载新的URL后,请等待直到窗口显示它具有.addEventListener属性。由于某些未知的原因,IE中新创建的窗口尚不具有此属性。这意味着您不能load在新创建的窗口上安装事件处理程序。相反,您必须等待该属性可用,然后才能安装load事件处理程序。
  4. 当该.addEventListener属性可用时,请查看文档是否已完成加载。如果是这样,请继续执行DOM操作。如果不是,则为文档加载完成时注册一个事件处理程序。

我已经创建了一个函数调用monitorWindowLoad()来执行上述步骤:

function monitorWindowLoad(win, origURL, fn) {
    log("monitorWindowLoad: origURL = " + origURL);

    function windowInitiated() {
        // at this point, we know the new URL is in window.location.href
        // so the loading of the new window has started
        // unfortunately for us, IE does not necessarily have a fully formed
        // window object yet so we have to wait until the addEventListener
        // property is available
        checkCondition(function() {
            return !!win.addEventListener;
        }, windowListen);
    }

    // new window is ready for a listener
    function windowListen() {
        if (win.document.readyState === "complete") {
            log("found readyState");
            fn();
        } else {
            log("no readyState, setting load event handler");
            win.addEventListener("load", fn);
        }
    }

    if (origURL) {
        // wait until URL changes before starting to monitor
        // the changing of the URL will signal that the new loading window has been initialized
        // enough for us to monitor its load status
        checkCondition(function() {
            return win.location.href !== origURL;
        }, windowInitiated);
    } else {
        windowInitiated();
    }
}

// Check a condition.  If immediately true, then call completeFn
// if not immediately true, then keep testing the condition
// on an interval timer until it is true
function checkCondition(condFn, completeFn) {
    if (condFn()) {
        completeFn();
    } else {
        var timer = setInterval(function() {
            if (condFn()) {
                clearInterval(timer);
                completeFn();
            }
        }, 1);
    }
}

然后,可以使用此功能在几个加载页面中单击连续的链接,如下所示:

function go() {
    // open new window
    var exampleWindow = window.open("window2.html");
    monitorWindowLoad(exampleWindow, "about:blank", function() {
        var loc = exampleWindow.location.href;
        clickButton(exampleWindow, "button2");
        monitorWindowLoad(exampleWindow, loc, function() {
            loc = exampleWindow.location.href;
            clickButton(exampleWindow, "button3");
            monitorWindowLoad(exampleWindow, loc, function() {
                // last page loaded now
            });
        });
    });
}

有这个概念的实际工作演示在这里这将加载一个名为window1a.html的文件。该页面中的Javascript为window2.html打开一个新窗口,并在加载该窗口时单击该窗口中的特定链接。单击该链接将打开window3.html,并在加载该窗口时单击该窗口中的链接,然后再打开window4.html。最后应该打开两个窗口(window1a.html和window4.html)。window1a.html将包含其执行的各种事件的日志。

window1.html中的脚本不知道任何URL。它只是单击链接并监视新加载的窗口何时加载,因此可以单击下一个链接,依此类推。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

确保对象元素已完全加载页面

来自分类Dev

JavaScript页面已完全加载布尔检查

来自分类Dev

Javascript页面已完全加载布尔检查

来自分类Dev

页面上的所有视频均已完全加载后,执行javascript

来自分类Dev

通过Javascript添加内容后,查找内容已完全加载

来自分类Dev

页面完全加载后如何选择按钮?

来自分类Dev

Phantom JS单击按钮-等待页面完全加载

来自分类Dev

如何确保每个相关的 Firebase 数据都已完全加载?

来自分类Dev

单击按钮后,将重新加载页面,而不是调用函数

来自分类Dev

单击后退按钮注销后重新加载jsp页面

来自分类Dev

如何知道 Automation Anywhere 中的页面是否已完全加载?

来自分类Dev

单击并加载页面 jquery 后

来自分类Dev

单击链接类后如何加载 JavaScript 页面刷新?

来自分类Dev

JavaScript:单击按钮后将图像加载到div中

来自分类Dev

单击按钮后 jQuery/JavaScript 加载 div 背景图像

来自分类Dev

如何计算每次单击后重新加载页面时按钮单击的次数?

来自分类Dev

在页面加载或按钮单击时调用 javascript 函数时自动单击按钮

来自分类Dev

页面完全加载后加载jquery

来自分类Dev

单击加载更多按钮后如何显示加载更多页面的整个源代码?

来自分类Dev

页面加载后地图将不显示,但单击按钮后将显示块

来自分类Dev

我如何才能使jQuery仅在单击按钮后才执行,而不是在页面加载时执行

来自分类Dev

Jquery:单击该div的删除按钮后页面正在重新加载

来自分类Dev

如何比较单击按钮几秒钟后加载的登录页面上的文本?

来自分类Dev

页面完全加载后如何加载PHP页面?

来自分类Dev

页面完全加载后关闭窗口

来自分类Dev

页面完全加载后如何显示图片?

来自分类Dev

页面完全加载后如何启动点击

来自分类Dev

页面完全加载后启动滑块

来自分类Dev

页面完全加载后关闭窗口

Related 相关文章

  1. 1

    确保对象元素已完全加载页面

  2. 2

    JavaScript页面已完全加载布尔检查

  3. 3

    Javascript页面已完全加载布尔检查

  4. 4

    页面上的所有视频均已完全加载后,执行javascript

  5. 5

    通过Javascript添加内容后,查找内容已完全加载

  6. 6

    页面完全加载后如何选择按钮?

  7. 7

    Phantom JS单击按钮-等待页面完全加载

  8. 8

    如何确保每个相关的 Firebase 数据都已完全加载?

  9. 9

    单击按钮后,将重新加载页面,而不是调用函数

  10. 10

    单击后退按钮注销后重新加载jsp页面

  11. 11

    如何知道 Automation Anywhere 中的页面是否已完全加载?

  12. 12

    单击并加载页面 jquery 后

  13. 13

    单击链接类后如何加载 JavaScript 页面刷新?

  14. 14

    JavaScript:单击按钮后将图像加载到div中

  15. 15

    单击按钮后 jQuery/JavaScript 加载 div 背景图像

  16. 16

    如何计算每次单击后重新加载页面时按钮单击的次数?

  17. 17

    在页面加载或按钮单击时调用 javascript 函数时自动单击按钮

  18. 18

    页面完全加载后加载jquery

  19. 19

    单击加载更多按钮后如何显示加载更多页面的整个源代码?

  20. 20

    页面加载后地图将不显示,但单击按钮后将显示块

  21. 21

    我如何才能使jQuery仅在单击按钮后才执行,而不是在页面加载时执行

  22. 22

    Jquery:单击该div的删除按钮后页面正在重新加载

  23. 23

    如何比较单击按钮几秒钟后加载的登录页面上的文本?

  24. 24

    页面完全加载后如何加载PHP页面?

  25. 25

    页面完全加载后关闭窗口

  26. 26

    页面完全加载后如何显示图片?

  27. 27

    页面完全加载后如何启动点击

  28. 28

    页面完全加载后启动滑块

  29. 29

    页面完全加载后关闭窗口

热门标签

归档