Load html content of a file to another web page

Question

So I have www.siteA.com and www.siteB.com. Site A is my main site and site B is where I store some few web pages mostly html pages. I want to load a webpage from site B into a page of site A. So far, I have search SO about how to do this and found this one Insert external page html into a page html but it wont work on me. Here is the code I used from the link above:

<!DOCTYPE html>
<html>
<head>
<script>
function createRequestObject() 
{
   var obj;
   var browser = navigator.appName;
   if(browser == "Microsoft Internet Explorer"){
      obj = new ActiveXObject("Microsoft.XMLHTTP");
   }else{
      obj = new XMLHttpRequest();
   }
   return obj;
}

function sendReq(req) 
{    
   http.open('get', req);
   http.onreadystatechange = handleResponse;
   http.send(null);
}

function handleResponse() 
{    
   if (http.readyState == 4)
   {
      var response = http.responseText;
      document.getElementById('here').innerHTML=response;
   }
}

 sendReq('http://www.siteB.com/file.html');
 </script>
 </head>

 <body >
     <div id="here"></div>
 </body>
 </html>

www.siteB.com/file.html file only contains this:

<!DOCTYPE html>
<html>
<head>
</head>

 <body >
     <h1>hello world!</h1>
     <p><img src="http://www.siteB.com/img.jpg"/></p>
 </body>
 </html>

Any idea why it wont work on me? Or is it possible to load an external page from another domain?

First have you considered using jQuery for the AJAX stuff - means you won't have to worry about the differences in browsers and could save you a lot of headaches. — Matthew Riches, Sep 25 '13 at 16:05
You need to use jquery provided ajax call with the protocol jsonp. — Iqbal Malik, Sep 25 '13 at 16:09
Use an `` - you cant do what you are trying to do, see http://en.wikipedia.org/wiki/Same-origin_policy and http://en.wikipedia.org/wiki/Cross-site_scripting — davidkonrad, Sep 25 '13 at 16:14
@Benjamin - What's wrong with thanking? Is it bad to be polite and all on this website? — , Sep 25 '13 at 19:07
@AnnaGee Nothing wrong really, but please read [this question on meta](http://meta.stackexchange.com/q/2950/175147) to understand the philosophy of Stack Exchange! — BenMorel, Sep 25 '13 at 21:41

score 1 · Answer 1 · answered Sep 25 '13 at 16:09

AJAX is subject to the Same-origin Policy. It can't access content from a domain that's different from its current domain.

Since you've tagged this question as PHP, I assume you're using it, and you can retrieve content from that page as follows:

<?php
$contents = file_get_contents('http://www.siteB.com/file.html');
echo $contents;
?>

Then, you can redirect your XMLHttpRequest to that PHP file, which will retrieve the content for you.

score 0 · Answer 2 · answered Sep 25 '13 at 16:07

0

JS cannot communicate between sites like that. Since you tagged PHP, you can use PHP.

document.getElementById('here').innerHTML=JSON.parse(<?php echo json_encode(file_get_contents('http://www.siteB.com/file.html')); ?>);

answered Sep 25 '13 at 16:07

Brian

7,394
3
25
46

score -2 · Answer 3 · answered Sep 25 '13 at 16:07

-2

If you want to show another page from a website, why not use iframes?

http://www.w3schools.com/tags/tag_iframe.asp

<iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

answered Sep 25 '13 at 16:07

Arian Faurtosh

17,987
21
77
115

I tried this one also and it works but some people said using iframe is not really a good idea. So I was kinda hesitant to use it. But I guess I will just have to settle on this one if everything fails. thank you. – Sep 25 '13 at 16:22
@AnnaGee Read this Q&A, to understand if you should use iFrames: http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice – Arian Faurtosh Sep 25 '13 at 16:45
-1 Frames hurt SEO, feel dated to the user and are problematic, not to mention frames are subject to the same-origin policy too. – FrostyFire Dec 10 '13 at 22:33

Load html content of a file to another web page

3 Answers3