我目前有一個類似於此格式的網頁，帶有側欄和內聯框架，指向我網站上的其他頁面。JavaScript確認讓用戶與iframe中的對象互動

enter image description here

我有下面的代碼，以供用戶確認框，如果他們希望離開頁面：

window.onbeforeunload = function(e) { 
    return 'All unsaved data will be lost.'; 
};

在內部框架，我有不同的HTML元素，如文本框，輸入框，按鈕等。我不希望用戶獲得onbeforeunload函數，除非他們先點擊了其中一個輸入元素。

當然，我可以去和每個代碼文本框，按鈕等，使用手動創建如shouldPopup一個變量，然後使用onclick設置shouldPopup到TRUE，最後使用onbeforeunload if語句，但這是不方便的，如果我將來可能會做出更多改變，我可能不得不再次逐一修改每個元素。

什麼是獲得相同結果的更好方法？任何關於如何簡化代碼的輸入都非常感謝！ :)

更新：

我的I幀的一些詳細信息。我正在使用一些基本功能的jQuery庫（沒有什麼奇特的）。其中有相當多的PHP，以及一些數據庫請求，但沒有什麼不尋常的。希望這些信息對任何想提出任何建議的人都很有幫助

來源

2013-01-21 Charles

在我看來，這是實現這個最直接的方法。我假設你在iFrame的表單中沒有使用像[Backbone.js]（http://backbonejs.org/#）這樣的模型/視圖工具，因此監視狀態並設置標誌是最簡單的方法。您能否請添加一些細節：（縮寫）您在iFrame中使用的代碼，您正在使用的庫（如jQuery，Backbone.js等）。這將有助於瞭解您的設置。 –

更新了我的文章。如果還有其他東西可以添加，請告訴我！ – Charles

如果你不想改變太多你的代碼，我認爲標誌是可以的。以下是一個簡單而實用的方法。

實例形式：

<input type="text" class="form" ...> 
<input type="text" class="form" ...> 
<select class="form" ...> 
    <option value=""></option> 
    ... 
</select>

兩個iFrame中監控變化：

(function(){ 
    // This can be optimized to check against saved values on blur 
    $("body").on("change", ".form", function(evt){ 
    window.top.$(window.top).trigger("change-form"); // trigger custom event in parent page 
    }); 
}());

父頁面：

(function(){ 
    var dirty = false 
    $(window).on("change-form", function(){ 
    dirty = true; 
    }); 

    window.onbeforeunload = function(e) { 
    // Notify user only if forms are dirty 
    return dirty ? 'All unsaved data will be lost.' : undefined; 
    }; 
}());

此代碼是題庫的，這是未經測試。

注：如果您的網頁比從父頁不同的域提供你會遇到跨站點腳本問題。在這種情況下，您無法訪問父頁面的Javascript。然後，您必須使用postMessage()將消息發送到您的父頁面的域。

我建議你看一看Backbone.js：

編輯1：

骨幹可以幫你管理狀態你的表格。在Backbone中，Model將代表您的表單數據。代表你的表格（表單的輸入）的A View必然與該模型相關聯。它將監視模型上的表單域和set()屬性。骨幹模型有它自己的狀態，你可以檢查表單是否使用了例如。方法changed()。在應用程序中分離模型和視圖總是一個好主意，它有助於分離責任。

我只是想給你另一個想法。

編輯2：

修正觸發在頂部窗口的事件的代碼。我不確定$(window.top)是否有效。這是行不通的。我不知道爲什麼。我已經測試過，並且這段代碼是正確的：

window.top.$(window.top). ...

我已更新上述代碼。

來源

2013-01-21 22:18:33

謝謝你的詳細回覆！ +1我會考慮你的方法。我不認爲這會涉及到我對現有代碼的太多修改 – Charles

我的榮幸！請注意，您可能必須在iFrame中處理事件觸發（'trigger'）。表單域的監視非常簡單。例如，如果您將一個值從「abc」更改爲「cba」回到「abc」，它將標記髒表單：表單沒有更改，但標記爲髒。但由於大多數應用程序（我知道）認爲這是「骯髒」，我認爲你的情況也可以。 –

我更新了我的代碼：'$（window.top）'是不夠的，這是必須的：'window.top。$（window.top）'。 –

看起來你似乎正在尋找（本質上）髒標誌（就像SO使用這裏一樣）。從本質上講，因爲這是對設計的補充，所以保持腳本與UI分離，並使用某種選擇器來抓取所有可能被更改的元素，並綁定一個事件，該事件只是相應地監視和更改髒標誌。

爲了簡潔起見，這裏是一個jQuery版本：

var isDirty = false; 
$(':input').on('change', function(e){ 
    isDirty = true; 
}); 
$(window).on('beforeunload',function(e){ 
    if (isDirty){ 
    // Alert th euser there's unfinished changes 
    } 
});

很簡單，並保持腳本分離。另外，如果這些是你的子窗口，你可以參考window.parent並將標誌傳遞給主視圖（如果你願意的話）。

來源

2013-01-21 22:02:07

JavaScript確認讓用戶與iframe中的對象互動

回答

編輯1：

編輯2：

相關問題