Use PHP for Cross Site Loading of HTML Content

Question

Maybe a stupid question, but I'm wrecked from this issue.

The issue: cross domain loading of webpage via javascript and having access to variables and elements within

Theoretical solution:

1. Send an ajax request to a local php file with the requested URL as a parameter
2. Get the PHP file to load the page
3. Display the loaded page and have access to the elements in a box specified

Before I endeavor, is something like this possible or worth the work involved? I am familar with PHP Simple HTML DOM Parser.

Thanks in advance, have spent quite some time on this issue already.

---

Update

First, the javascript:

function loadTheUrl(x){      // x = the url, e.g. http://example.com
    $.ajax({ url: 'loader.php', // explained below
         data: {url: x},
         type: 'get',
         success: function(output) {
                      $('.loading-space').html(output);
                  }
            });
         
  } 

This calls a local PHP file called loader.php

loader.php

<?php

    echo file_get_contents($_GET['url']);
    

And that's it. This works, but it actually gives me some issues with CSS that I am trying to figure out. The CSS is overriding my site too.. I'd like to keep the CSS, but limit it to within that div.

---

Update

A semi-working example. Only works in Chrome due to data:text/html.

HTML

<div value='http://example.com' onClick='javascript:loadURL(this)'>Click Here</div>

JavaScript

function loadURL(x){
    var xURL = $(x).attr('value');
    $.ajax({ url: 'load.php',
         data: {url: xURL},
         type: 'get',
         success: function(output) {
                $('.page-loaded').attr("data", "data:text/html,"+output); // .page-loaded is an HTML object element
                  }
            });
  } 

load.php

<?php
    error_reporting(0);
    $doc = new DOMDocument();
    $doc->loadHTML(file_get_contents($_GET['url']));
    echo $doc->saveHTML();
  

Just curious as to why the downvotes are coming in. I would have thought this issue would have been more widespread? Thanks

---

Update

PHP way doesn't allow to access elements. CORS seems the only way to go. Just need to limit CSS to within the box.

Answer 1

Is this what you are looking to do?

   <script>
    $(function(){
      $.get("youFile.php", function(data){
          $("#container").html(data);
      });
    }):
    </script>

Answer 2

You could use DOMDocument, find all the script and link tags, remove them, and spit out the HTML:

<?php
$doc = new DOMDocument();
$doc->loadHTML(file_get_contents($_GET['url']));
$internal_css = $doc->getElementsByTagName('style');
foreach ($internal_css as $css) {
    $css->nodeValue = "#container_id " . implode(" #container_id ", explode("}", $css->nodeValue));
}
echo $doc->saveHTML();