Object.defineProperty不改變元素的屬性

Question

我試圖覆蓋我的應用程序中所有iframe的src屬性，因此無論HTML標記為其定義什么值，它們的src屬性始終設置為“redirect.html”。 到目前為止，我已經提出了以下內容，但它似乎沒有應用於DOM元素：

<!doctype html>
<html>
<head>
    <script>
        var propertyDescriptorSrc = Object.getOwnPropertyDescriptor(HTMLIFrameElement.prototype, "src");
        Object.defineProperty(HTMLIFrameElement.prototype, "src", {
            get: function get_src() {
                var val = propertyDescriptorSrc.get.call(this);
                return "redirect.html";
            },
            set: function (val) {
                alert('setting: ' + val);
                propertyDescriptorSrc.set.call(this, val);
            }
        });
    </script>
</head>
<body>
    <iframe src="page.html"></iframe>
</body>
</html>

我期望正文中的iframe元素加載redirect.html而不是page.html，因為我重寫了它的“getter”，但它仍然加載了page.html。 有沒有辦法強制這種行為，默認情況下所有iframe都轉到redirect.html而不是src屬性中定義的任何內容？

（這只是一個實驗項目）

Answer 1

在啟動javascript之前，根據Critical Rendering Path，DOM樹已經被解析並包含所有iframe及其src。 唯一的方法是使用javascript重新定義單個iframe節點的src屬性。 例如，如下所示。

所有iframe都設置為redirect.html：

<!doctype html>
<html>
<head>

</head>
<body>
    <iframe src="page.html"></iframe>
    <iframe src="page2.html"></iframe>
<script>
( function(){
    var lng = document.getElementsByTagName('iframe').length;
    for (var i=0; i<lng;i++){
    document.getElementsByTagName('iframe')[i].src="redirect.html";
    }
})();
</script>
</body>
</html>

根據這個建議，@ Aaron Digulla提供了一種更具可讀性的功能。 似乎DOM樹的搜索算法今天如此有效，以至於參數是記錄的可讀性，而不是效率。

    (function(){
    var frames = document.getElementsByTagName('iframe');
    for (var i=0; i<frames.length;i++){
        frames[i].src="redirect.html";
    }
    })();

Object.defineProperty不改變元素的屬性

問題描述

1 個解決方案

解決方案1
-1 2019-03-22 14:29:14

Object.defineProperty不改變元素的屬性

問題描述

1 個解決方案

解決方案1 -1 2019-03-22 14:29:14

解決方案1
-1 2019-03-22 14:29:14