js designMode 属性变化 自定义通知

 

js代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <button onclick="modify()"> modify designMode</button>
    <button onclick="register()"> manual register event</button>
    <iframe id="nihao">
    </iframe>
    <script>
       var iframe = document.querySelector("#nihao");

        //这里注册没有用。因为后面执行了 document.close()
        window.addEventListener('cust_event_notify_attr_changed', function (event) {
            console.log("=== cust_event_notify_attr_changed from top window ===");
        }, false);
        iframe.contentWindow.addEventListener('click', function (event) {
            console.log("=== onclick iframe click from top window===");
        }, false);

        iframe.contentWindow.document.open();
        iframe.contentWindow.document.write("<!DOCTYPE html> <html><body><h3>nihao</h3></body></html>");
        iframe.contentWindow.document.close();

        //这里注册才有用。
        console.log("== register cust_event_notify_attr_changed ==");
        iframe.contentWindow.addEventListener('cust_event_notify_attr_changed', function (event) {
            console.log("=== cust_event_notify_attr_changed  from iframe===");
        }, false);
        iframe.contentWindow.addEventListener('click', function (event) {
            console.log("=== onclick iframe click from iframe===");
        }, false);

        iframe.contentWindow.document.designMode = "on";

        function modify() {
            document.querySelector("#nihao").contentWindow.document.designMode = "off";
        }

        function register() {
            var iframe = document.querySelector("#nihao");

            iframe.contentWindow.addEventListener('cust_event_notify_attr_changed', function (event) {
                console.log("=== cust_event_notify_attr_changed from iframe again===");
            }, false);

            iframe.contentWindow.addEventListener('click', function (event) {
                console.log("=== onclick iframe click===");
            }, false);
        }
    </script>
</body>
</html>

 

posted @ 2020-11-11 10:03  Bigben  阅读(225)  评论(0)  编辑  收藏  举报