Insert HTML into another Web page on the fly

Question

Let's say that I own 2 websites, A and B. I have access to the source code for website A but not for website B although it is developed by the same organization I work for, but by a different department that won't share the source code with us.

When a user browses away from website A to website B, I want to insert some HTML into website B that links back to website A. Something like a plug-in that facebook, twitter, etc. provide.

I understand that I can do this in two ways:

First Way: Using javascript I ask the developers on the B website to include a <div id = "fromWebsiteA" /> and my javascript code <script src = "websiteA.com/script.js" /> tag. In my javascript code, I access the DOM of the hosting page on website B and create child elements inside my div "fromWebsiteA". This is what most social networking websites provide website publishers who want to put a Pin It (Pinterest) or Digg it or whatever button on their website.

Second way: Using iFrames I give them an iframe within which my content will load. Like facebook's like plug-in.

My questions are:

1) Am I thinking along the right lines?

2) Is there a third technique?

3) Sorry if I sound stupid with this last question, as I understand it involves security threats, but is there a way for me to insert that HTML into site B without involving the development team of site B at all?

Answer 1

I think the right way is just to ask the website B developer to write a code that checks the http_referer in the header and then accordingly shows your widget(or whatever you call it) Also it would be smart to store a cookie so they can keep showing the widget when the user is navigating through the website.

Another way you can include a GET variable like ?from=websiteA or something instead of checking http_referer

Answer 2

First you'll have to know that you came from website A. When you browser from website A to website B, you'll have to adjust the link with a parameter ( <a href="wwww.example.com?from=websiteA>Go</a> ) or use a form to achieve the same.

To detect/read on website B whether or not it came from website A, you'll need to insert your custom JS. Here you should read the hash

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>"

I wouldn't event try to use an iFrame. I'm not sure if you can detect the prev page from within an iframe.