如何使用書籤在任何網站的頁面中顯示錶單（如Google閱讀器中的註釋）？

在Google閱讀器中，您可以使用書籤「記錄」您正在訪問的頁面。當您按下書籤時，會在當前頁面頂部顯示一些Google表單。在表單中，您可以輸入說明等。當您按提交時，表單會在不離開頁面的情況下自行提交，然後表單消失。總而言之，一次非常流暢的體驗。如何使用書籤在任何網站的頁面中顯示錶單（如Google閱讀器中的註釋）？

我明顯地試圖看看它是如何完成的，但最有趣的部分被縮小和無法讀取。所以...

關於如何實現這樣的東西（在瀏覽器端）的任何想法？有什麼問題？現有的博客文章描述這個？

來源

2008-09-15 jplindstrom

Aupajo有它的權利。然而，我會指出你爲我們的網站（www.iminta.com）製作的書籤框架。

小書籤本身的內容如下：

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());document.body.appendChild(e)})())

這只是注入了新的腳本到包括該文件的文檔：

http://www.iminta.com/javascripts/new_bookmarklet.js

重要的是要注意的是，書籤創建了一個很重要的iframe，定位它，並將事件添加到文檔中，以允許用戶執行命中轉義（關閉窗口）或滾動（以便它保持可見狀態）。它還隱藏了與z定位不兼容的元素（例如，閃光）。最後，它有助於與iframe中運行的JavaScript通信。通過這種方式，你可以在iframe中有一個關閉按鈕，告訴父文檔移除iframe。這種跨域的東西有點冒失，但這是我看到的唯一方法。

不是爲了佯攻;如果你不擅長JavaScript，就要奮鬥。

來源

2008-09-16 00:06:00 Anutron

謝謝，這是一個很好的答案，處理z-index和刪除flash（我遇到了問題），以及最初我沒有意識到的iframe。我看到你也使用內聯css，這是我遇到的其他問題。 – jplindstrom 2008-09-16 01:23:05

在它非常基本的層次上，它將使用createElement創建要插入到頁面中的元素，並將appendChild或insertBefore插入到頁面中。

來源

2008-09-15 23:20:59

您可以使用一個簡單的書籤添加<腳本>標籤，該標籤加載一個外部JavaScript文件，該文件可以將必要元素推送到DOM並向用戶呈現模態窗口。該表單通過AJAX請求提交，它在服務器端處理，並返回成功或用戶需要糾正的錯誤列表。

所以書籤會是什麼樣子：

的javascript：代碼到添加腳本標籤和-INIT-的腳本;

外部腳本將包括：

將元素添加到DOM
更新該元素的innerHTML來是要顯示給用戶的標記的能力的能力
處理AJAX表格處理

窗口效果可以通過CSS定位來實現。

至於這個特定任務的一個完整資源，你很幸運找到任何東西。但看看較小的個人部分，你會發現很多資源。查看有關模式窗口的信息，向DOM添加元素以及AJAX處理。

來源

2008-09-15 23:26:15 Aupajo

如何使用書籤在任何網站的頁面中顯示錶單（如Google閱讀器中的註釋）？

回答

相關問題