判断iframe是否加载完成的完美方法

判断 iframe 是否加载完成的完美方法

var iframe = document.createElement(“iframe”); iframe.src = “http://www.planabc.net”;

if (!/@cc_on!@/0) { //if not IE iframe.onload = function(){ alert(“Local iframe is now loaded.”); }; } else { iframe.onreadystatechange = function(){ if (iframe.readyState == “complete”){ alert(“Local iframe is now loaded.”); } }; }

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement(“iframe”); iframe.src = “http://www.planabc.net”;

if (iframe.attachEvent){ iframe.attachEvent(“onload”, function(){ alert(“Local iframe is now loaded.”); }); } else { iframe.onload = function(){ alert(“Local iframe is now loaded.”); }; }

document.body.appendChild(iframe);

几点补充说明：

1. IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
2. 第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

react 中使用

import React, {useEffect, useRef, useState} from ‘react’; import {useParams} from “react-router-dom”; import {Spin} from ‘antd’;

const YuQueDetail = () => { const params = useParams(); //params参数 => {id: “01”, title: “消息1”} const iframeRef: any = useRef(); const [loading, setLoading] = useState(false);

useEffect(() => { setLoading(true); const iframe = iframeRef.current; if (iframe.attachEvent) { iframe.attachEvent(“onload”, function () { setLoading(false); }); } else { iframe.onload = function () { setLoading(false); }; } }, [])

return <> <Spin tip=”使劲加载中…” spinning={loading}> <iframe width=’100%’ title=’yu-que’ ref={iframeRef}

    style={{height: 'calc(100vh - 170px)'}}

    src={`https://www.yuque.com/hutaoao/blog/${params.slug}?view=doc_embed&from=blog&title=1&outline=1`}
    />
</Spin>   </>; };

export default YuQueDetail;