使用PHP跨站点加载HTML内容

也许这是一个愚蠢的问题，但我被这个问题搞砸了。

问题:通过javascript跨域加载网页并访问

中的变量和元素理论解决方案:

1. 用请求的URL作为参数发送一个ajax请求到本地php文件
2. 获取加载页面的PHP文件
3. 显示加载的页面，并可以访问指定
框中的元素

在我努力之前，像这样的事情可能吗?值得吗?我熟悉PHP简单HTML DOM解析器。

提前感谢，我已经在这个问题上花了不少时间。

---

<标题> 更新首先，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);
                  }
            });
         
  } 

调用本地PHP文件loader.php

loader.php

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

就是这样。这工作，但它实际上给了我一些问题与CSS，我试图弄清楚。CSS也覆盖了我的网站。我想保留CSS，但将其限制在该div内。

---

<标题> 更新

一个半工作的例子。仅适用于Chrome由于数据: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();
  

只是好奇为什么会有人投反对票。我本以为这个问题会更普遍?由于

---

更新

PHP方式不允许访问元素。CORS似乎是唯一的出路。只需将CSS限制在框内即可。

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

<?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();