跨域 iframe 拖放

Question

我知道这个问题有一个简单的解决方案，但相信我，我现在找不到它。无论如何，我的问题是我必须从 Iframe 中拖动图像（内容来自另一个域）并放入图像占位符中。演示位于

http://popupbuilder.webege.com/IframeDragDropadil/

图像应该被拖到框中，并且只有当 Iframe 加载来自同一域的内容时，它才会很好地坐在那里。但是，如果我像在演示中所做的那样从另一个域加载内容（上面提供了^链接），则整个事情都不起作用。

现在我知道这是一个跨域问题。您不能只是将来自另一个域的数据操作到 iframe 中。很公平！！

所以我遇到了另一个想法，那就是通过PHP将整个页面复制到您的服务器，然后将其提供给iframe。这听起来很有希望，但php函数

<?php file_get_contents(); ?>

仅返回 html 而不是完整的网页。同样，这将扼杀可用性的整个概念，因为用户不知道该拖动什么。

最后一件事，如果我将图像从另一个浏览器窗口拖放到这个占位符，它就可以了！我不知道 iframe 导致了什么问题以及如何解决这个问题。

使用 PHP 在本地服务器上复制整个网站可能是一种解决方案，但我看不出如何！

Answer 1

经过几天的努力，我想出了一个解决方案，即使我们正在打开另一个网站（属于另一个域的网站），它实际上可以帮助我们将事件绑定到 Iframe 的元素。这里最好的选择是将整个网站代理到我们自己的服务器上，然后在 Iframe 中打开它。现在我们可以轻松地绑定事件并操纵此网站。

请注意，此技术只有 70-80% 的准确率。我创建的PHP脚本可能并不总是正确打开站点。有时，代理站点进行的 AJAX 调用未完成。但是该脚本确实提供了一个很好的起点，欢迎其他开发人员将其扩展:)

   <?php
$opts = array('http' =>
    array(
        'method'  => 'GET',
        //'user_agent '  => "Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2) Gecko/20100301 Ubuntu/9.10 (karmic) Firefox/3.6",
        'header' => array(
            'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
'
        ), 
    )
);
     function is_url_exist($url){
            $ch = curl_init($url);
            $status = false;
            curl_setopt ($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6");
            curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 120);
            curl_setopt($ch, CURLOPT_TIMEOUT, 120);
            curl_setopt($ch, CURLOPT_NOBODY, true);
            curl_exec($ch);
            $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
            if($code == 200){
               $status = true;
            }else{
              $status = false;
            }
            curl_close($ch);
           return $status;
        }
    function get_web_page( $url )
    {
        $user_agent='Mozilla/5.0 (Windows NT 6.1; rv:8.0) Gecko/20100101 Firefox/8.0';
        $options = array(
            CURLOPT_CUSTOMREQUEST  =>"GET",        //set request type post or get
          //  CURLOPT_HTTPGET => true,
            CURLOPT_POST           =>false,        //set to GET
         //   CURLOPT_USERAGENT      => $user_agent, //set user agent
            CURLOPT_COOKIEFILE     =>"cookie.txt", //set cookie file
            CURLOPT_COOKIEJAR      =>"cookie.txt", //set cookie jar
            CURLOPT_RETURNTRANSFER => true,     // return web page
            //CURLOPT_HEADER         => true,    // don't return headers
            CURLOPT_FOLLOWLOCATION => true,     // follow redirects
            CURLOPT_ENCODING       => "",       // handle all encodings
            CURLOPT_AUTOREFERER    => true,     // set referer on redirect
            CURLOPT_CONNECTTIMEOUT => 120,      // timeout on connect
            CURLOPT_TIMEOUT        => 120,      // timeout on response
            CURLOPT_MAXREDIRS      => 10,       // stop after 10 redirects
        );
        $ch      = curl_init( $url );
        curl_setopt_array( $ch, $options );
        $content = curl_exec( $ch );
        $err     = curl_errno( $ch );
        $errmsg  = curl_error( $ch );
        $header  = curl_getinfo( $ch );
        curl_close( $ch );
        $header['errno']   = $err;
        $header['errmsg']  = $errmsg;
        $header['content'] = $content;
        return $content;
    }
     function GetDomainFromAddress($url){
       $parse = parse_url($url);
        $scheme = $parse['scheme'];
        $URL = $parse['host']; // prints 'domain.com'
        $URL = $scheme.'://'.$URL.'/';
        return $URL;
   }
    /*All functions end here*/
    $url=$_GET["url"];
//  $url="http://www.topshop.com/en/tsuk/product/new-in-this-week-2169932/new-in-this-week-493/blue-pleat-laceup-kilt-2441152?bi=1&ps=20";
    $input= get_web_page($url);
$domain = $url;
$doc = new DOMDocument;
   libxml_use_internal_errors(true);
   $doc->loadHTML($input);
    $tags = $doc->getElementsByTagName('img');
    if(count($tags) > 0)
    {
        foreach ($tags as $tag) {
           $src=$tag->getAttribute('src');
           if( !empty($src) )
           {
               if(strpos($src,"https")!==false||strpos($src,'//')!==false || strpos($src,"http")!==false)
               {                
               }
               else
               {
                    $src1 = null;
                    if(!is_url_exist($src))
                    {
                        $domain = GetDomainFromAddress($url);
                        $src1=$domain.$src;
                    }
                    $src=$src1;
               }
           }

           $tag->setAttribute('src', $src);
        }
    }
    $tags = $doc->getElementsByTagName('link');
    $i=0;
    if(count($tags) > 0)
    {
    foreach ($tags as $tag) {

           $src=$tag->getAttribute('href');
           if( !empty($src) )
           {
               if(strpos($src,"https")!==false||strpos($src,'//')!==false || strpos($src,"http")!==false)
               {                
               }
               else
               {
                    $src1 = null;
                    if(!is_url_exist($src))
                    { $domain = GetDomainFromAddress($url);
                        $src1=$domain.$src;
                    }
                    $src=$src1;
               }
           }
           $tag->setAttribute('href', $src);
        }
    }
        $tags = $doc->getElementsByTagName('script');
    if(count($tags) > 0)
    {
    foreach ($tags as $tag) {

           $src=$tag->getAttribute('src');
           if( !empty($src) )
           {
               if(strpos($src,"https")!==false||strpos($src,'//')!==false || strpos($src,"http")!==false)
               {                
               }
               else
               {
                    $src1 = null;
                    if(!is_url_exist($src))
                    { $domain = GetDomainFromAddress($url);
                        $src1=$domain.$src;
                    }
                    $src=$src1;
               }
           }
           $tag->setAttribute('src', $src);
        }
    }
echo $doc->saveHTML();
?>