如何在jQuery 2.2.4中监听<object>元素加载完成？

被迫使用jQuery 2.2.4版本时，用<iframe>加载PDF的代码可以正常触发加载完成提示：

<html>
    <head>
        <title>Check pdf</title>
        <script src="https://code.jquery.com/jquery-2.2.4.js" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function () {
                $("#pdf-holder").load(function () {
                    alert("Finish loading");
                });
                setTimeout(function (){
                    $("#pdf-holder").attr('src', 'file.pdf')
                }, 5000);
            });
        </script>
    </head>

    <body>
        <iframe id="pdf-holder" width="60%" height="500px" type="application/pdf" >
             Your browser cannot display PDF files
        </iframe>
    </body>
    
</html>

但将<iframe>替换为<object>后，PDF能正常加载，但load事件无法触发：

<html>
    <head>
        <title>Check pdf</title>
        <script src="https://code.jquery.com/jquery-2.2.4.js" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function () {
                $("#pdf-holder").load(function () {
                    alert("Finish loading");
                });
                setTimeout(function (){
                    $("#pdf-holder").attr('data', 'file.pdf')
                }, 5000);
            });
        </script>
    </head>

    <body>
        <object id="pdf-holder" width="60%" height="500px" type="application/pdf" >
             Your browser cannot display PDF files
        </object>
    </body>
    
</html>

由于<object>的onload事件兼容性差，针对2022年主流浏览器环境，可采用以下几种方案判断PDF是否加载完成：

方案1：监听readystatechange事件 #

部分浏览器会为<object>触发readystatechange事件，通过readyState属性判断加载状态：

$(document).ready(function () {
    $("#pdf-holder").on('readystatechange', function () {
        // readyState为complete表示资源加载完成
        if (this.readyState === 'complete') {
            alert("Finish loading");
        }
    });
    setTimeout(function (){
        $("#pdf-holder").attr('data', 'file.pdf')
    }, 5000);
});

方案2：轮询检测PDF阅读器内部状态 #

针对Chrome、Edge等使用内置PDF阅读器的浏览器，可轮询检测<object>的内部文档状态：

$(document).ready(function () {
    setTimeout(function (){
        $("#pdf-holder").attr('data', 'file.pdf');
        // 每500ms检查一次PDF加载状态
        const checkTimer = setInterval(function() {
            const objEl = document.getElementById('pdf-holder');
            // 尝试获取PDF内部文档（不同浏览器实现可能有差异）
            const innerDoc = objEl.contentDocument || objEl.getSVGDocument();
            if (innerDoc && innerDoc.readyState === 'complete') {
                clearInterval(checkTimer);
                alert("Finish loading");
            }
        }, 500);
    }, 5000);
});

方案3：先通过XHR预加载PDF，再检测<object>状态 #

先通过XMLHttpRequest确认PDF文件已下载完成，再赋值给<object>的data属性，同时配合状态检测，稳定性更高：

$(document).ready(function () {
    setTimeout(function (){
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'file.pdf', true);
        xhr.responseType = 'blob';
        
        xhr.onload = function() {
            if (xhr.status === 200) {
                // 将PDF转为Blob URL，避免重复下载
                const blobUrl = URL.createObjectURL(xhr.response);
                $("#pdf-holder").attr('data', blobUrl);
                
                // 检测object的加载状态
                const checkTimer = setInterval(function() {
                    const objEl = document.getElementById('pdf-holder');
                    if (objEl.readyState === 'complete') {
                        clearInterval(checkTimer);
                        alert("Finish loading");
                        // 释放Blob URL资源
                        URL.revokeObjectURL(blobUrl);
                    }
                }, 500);
            }
        };
        
        xhr.send();
    }, 5000);
});

内容的提问来源于stack exchange，提问作者Ivan