快速將HTML插入另一個網頁

Question

假設我擁有兩個網站A和B。我可以訪問網站A的源代碼，但不能訪問網站B的源代碼，盡管它是由我工作的同一組織開發的，但是由不共享網站的不同部門開發我們的源代碼。

當用戶從網站A瀏覽到網站B時，我想在網站B中插入一些HTML，這些HTML鏈接回網站A。諸如Facebook，Twitter等提供的插件。

我知道我可以通過兩種方式做到這一點：

第一種方法：使用javascript我要求B網站上的開發人員添加<div id = "fromWebsiteA" />和我的javascript代碼<script src = "websiteA.com/script.js" />標記。 在我的JavaScript代碼中，我訪問網站B上托管頁面的DOM，並在div“ fromWebsiteA”內創建子元素。 這是大多數社交網站為想要在網站上添加Pin It （Pinterest）或Digg it或其他按鈕的網站發布者所提供的。

第二種方式：使用iFrame，我為它們提供了一個iframe，可以在其中加載內容。 就像facebook的插件一樣。

我的問題是：

1）我在考慮正確的路線嗎？

2）有沒有第三種技術？

3）很抱歉，如果我對最后一個問題感到愚蠢，因為據我所知，它涉及安全威脅，但是有沒有辦法讓我將HTML插入到站點B中而完全不涉及站點B的開發團隊呢？

Answer 1

我認為正確的方法是讓網站B開發人員編寫代碼，檢查標頭中的http_referer ，然后相應地顯示您的小部件（或任何您稱呼的小部件），而且存儲cookie以便保留它們也很明智。在用戶瀏覽網站時顯示窗口小部件。

您可以包含GET變量（例如?from=websiteA類的另一種方法，而不是檢查http_referer

Answer 2

首先，您必須知道您來自網站A。當您從網站A瀏覽到網站B時，必須使用參數（ <a href="wwww.example.com?from=websiteA>Go</a> ）或使用表格來實現相同目的。

要檢測/讀取網站B是否來自網站A，您需要插入自定義JS。 在這里您應該閱讀哈希

var recognizeText = "from=websiteA";
if( location.hash.indexOf( recognizeText ) == -1 ) { return; /*didnt come from websiteA */ }

// We came from website A, I dont know if you want to reset the hash (should the link be visible if you browse through websiteB, all the time..? )
// Then it would be more convenient to add a hash because that you can replace without pagerefreshing (I noticed that setting location.search = "" does refresh)

$("fromWebsiteA").style.display = "block";
$("fromWebsiteA").innerHTML = "<a href='www.websiteA.com'>Go back</a>"

我不會嘗試使用iFrame。 我不確定您是否可以從iframe中檢測到上一頁。