4

How can one display external url content inside a local div element with jQuery?
The code I have tried fails to load, even if I am using php to handle cross-domain requests.

grab.php

<?php echo file_get_contents($_GET['url']); ?>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
       $(function(){
        var contentURI= 'en.wikipedia.org/wiki/Film #mw-content-text';
        $('#response').load('grab.php?url='+ contentURI);
       });
   </script>
</head>
<body>
<div id="response"></div>   
</body>
</html>
Deep Kakkar
  • 5,831
  • 4
  • 39
  • 75
skyisfalling
  • 53
  • 5
  • How does it fails? I suspect this has to do with URL hash. What behaviour do you get removing `#mw-content-text` from URI? – A. Wolff Dec 27 '17 at 05:30
  • I get XHR Loaded but the div is empty, nothing is displayed, also I get the "favicon.ico:1 GET http://127.0.0.1:8887/favicon.ico 404 (Not Found)" – skyisfalling Dec 27 '17 at 05:34
  • I don't know enough PHP but does it set relevant headers? – A. Wolff Dec 27 '17 at 05:40
  • I got, "HTTP/1.1 200 OK" "content-length: 64" "accept-ranges: bytes" "connection: keep-alive" – skyisfalling Dec 27 '17 at 05:48
  • Headers look good but have you tried removing `#` for testing purpose: `var contentURI= 'en.wikipedia.org/wiki/Film';`. Do you get some content? And for `favicon.ico` error, it is unrelevant to your issue – A. Wolff Dec 27 '17 at 05:51
  • I get exactly the same response as before. – skyisfalling Dec 27 '17 at 05:53
  • And what about url protocol? Same result using: `var contentURI= 'https://en.wikipedia.org/wiki/Film';`? And then with hash part? The thing is you should check that your issue comes from client side (jQuery) or from server side (PHP) – A. Wolff Dec 27 '17 at 05:54
  • yep, the same for 'https://'. – skyisfalling Dec 27 '17 at 05:56
  • But is `file_get_contents($_GET['url']);` getting the relevant content? – A. Wolff Dec 27 '17 at 05:57
  • Where should I check to see if it is getting the content ? May be through network tab ; "http://127.0.0.1:8887/grab.php?url=en.wikipedia.org/wiki/Film" ? – skyisfalling Dec 27 '17 at 06:01
  • https://stackoverflow.com/questions/18145273/how-to-load-an-external-webpage-into-a-div-of-a-html-page/18145353 try this – Nawaz Ghori Dec 27 '17 at 06:04
  • I would say easiest would be to paste in your browser nav bar the URL to `[path to your server]/grab.php?url=https://en.wikipedia.org/wiki/Film`. BTW, try with `http` protocol instead. Anyway, you should check your console network tab in browser to see what response do you have from your request. Your issue could be just because you are doing a request from your server from http to https BUT i'm really not sure it could be the issue here – A. Wolff Dec 27 '17 at 06:05
  • I just get the php code "" when I use the nav bar. – skyisfalling Dec 27 '17 at 06:10
  • So as i understand it, your PHP server isn't running – A. Wolff Dec 27 '17 at 06:11
  • that's it thanks, I will check into it asap, I was using chrome extension app called "200OK!" to troubleshoot the code, now as I understand it doesn't serve php, now It makes sense why the navigation bar only displays php and not the content, thank you A.Wolff for pointing me to the right direction. – skyisfalling Dec 27 '17 at 06:14
  • you are welcome! – A. Wolff Dec 27 '17 at 06:19

1 Answers1

-1

I suggest you to use iframe method .

Here is a easy example https://www.w3schools.com/tags/tag_iframe.asp

wu ivan
  • 1
  • 1