I need to load several websites in iframes whilst also adding a google translate plugin into each page so they can be translated. Here's my code for the insertion part:
<iframe onload="googleJS1(); googleJS2(); googleJS3();" class=iframe2 src=http://localhost:8888/mysitep></iframe>
<script>
function googleJS1() {
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentWindow.document;
var newScript = doc.createElement('div');
newScript.setAttribute("id", "google_translate_element");
var bodyClass = doc.getElementsByTagName('body')[0];
bodyClass.insertBefore(newScript, bodyClass.childNodes[0]);
}
function googleJS2() {
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentWindow.document;
var newScript = doc.createElement('script');
newScript.setAttribute("src", "http://translate.google.com/translate_a/element.js? cb=googleTranslateElementInit");
var bodyClass = doc.getElementsByTagName('head')[0];
bodyClass.insertBefore(newScript, bodyClass.childNodes[1]);
}
function googleJS3() {
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentWindow.document;
var newScript = doc.createElement('script');
newScript.setAttribute("src", "http://localhost:8888/mysite/google.js");
var bodyClass = doc.getElementsByTagName('head')[0];
bodyClass.insertBefore(newScript, bodyClass.childNodes[2]);
}
}
</script>
This works as long as the iframe target URL is on the same server. I read to bypass the same origin constraint I should set up a proxy server and pass all URL requests via the proxy. So I read up on cURL and tried this as a test:
<?php
function get_data($url) {
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_USERAGENT, $userAgent);
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
curl_setopt($ch,CURLOPT_FOLLOWLOCATION,true);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
$test = get_data("http://www.selfridges.com");
echo $test;
?>
The basic HTML elements are loaded yet no CSS and images are loaded. Also the links still point to the original URL. I need some suggestions on how I can also pull the CSS, images and js off the target URL into a proxy and load the pages from there, making it look like it came from the same domain and ports and by passing the same origin policy. I also need the links to work in this fashion.
e.g:
main page - http://localhost:8888/proxy.php
links - http://localhost:8888/proxy.php/products/2012/shoes
Any other methods or alternatives are also welcome.
Thanks