即时将HTML插入另一个网页

时间:2012-11-28 10:20:44

标签: javascript dom web-applications iframe

假设我拥有2个网站,A和B.我可以访问网站A的源代码但不能访问网站B,尽管它是由我工作的同一个组织开发的,但是由不同的部门开发了与我们分享源代码。

当用户浏览网站A到网站B时,我想在链接回网站A的网站B中插入一些HTML。像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的开发团队?

2 个答案:

答案 0 :(得分:1)

我认为正确的方法是让网站B开发人员编写一个代码来检查标题中的http_referer,然后相应地显示您的小部件(或者您称之为的任何内容) 此外,存储cookie以便在用户浏览网站时可以继续显示小部件是明智的。

另一种方法,您可以添加GET变量,例如?from=websiteA或其他内容,而不是检查http_referer

答案 1 :(得分:-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中检测到prev页面。