使用AJAX加載內容，其中包含腳本標記

我真正想要做的是，在Windows 7小工具中模擬Iframe的所有功能，而不受跨域限制。所以有可能，我加載了一個完整的html頁面，其中包含<html>,<body>和<script>標籤，並且加載所有這些是一個div /某些dom，以便加載的html的所有元素都被呈現，如Iframe 。使用AJAX加載內容，其中包含腳本標記

我敢肯定，確實存在一個相同的庫，但這裏的傢伙的幫助是非常可靠的，因此張貼在這個論壇上。

謝謝。

來源

2011-02-03 Neeraj

做的是，用jquery.ajax負載功能可按，分析數據，拿到劇本的標籤數據在另一個變種最容易的事情，把這個成JavaScript eval函數，somewehre在頁面上，並將其他數據放在需要插入新DOM的地方。

來源

2011-02-14 07:15:01 Titan

我知道你想要使用Ajax在HTML元素中加載整個頁面，但你可以這樣做，但這是錯誤的。正確的做法是加載外部腳本或樣式。

<!doctype html> 

<html> 
    <head> 
     <script> 
      (function() { 
       var _css; 

       Element.prototype.pullCssJs = function (folder) { 
        var _length = folder.length; 

        folder = folder[_length - 1] === "/" ? folder : folder + "/"; 

        if (typeof _css === "undefined") { 
         // Same 
         var css = document.createElement ("link"); 
          css.setAttribute ("href", folder + "css.css"); 
          css.setAttribute ("rel", "stylesheet"); 
          css.setAttribute ("type", "text/css"); 

         document.getElementsByTagName("head")[0].appendChild (css); 

         _css = css; 
        } 

        else { 
         if (_css !== css) { 
          var head = document.getElementsByTagName("head")[0]; 

          // Same 
          var css = document.createElement ("link"); 
           css.setAttribute ("href", folder + "css.css"); 
           css.setAttribute ("rel", "stylesheet"); 
           css.setAttribute ("type", "text/css"); 

          head.removeChild (_css); 
          head.appendChild (css); 

          _css = css; 
         } 
        } 

        var js = document.createElement ("script"); 
         js.setAttribute ("src", folder + "js.js"); 
         js.setAttribute ("type", "text/javascript"); 

        element.appendChild (js); 
       } 
      })(); 

      window.addEventListener ("load", function() { 
       document.body.addEventListener ("click", function (event) { 
        var target = event.target; 

        if (target.nodeName === "A") { 
         var con = new XMLHttpRequest(); 
         var href = target.href; 

         con.open ("GET", href, true); 

         con.send (null); 

         con.onreadystatechange = function() { 
          if (con.readyState === 4) { 
           if (con.status === 200) { 
            var element = document.getElementById ("element"); 
            var folder = href.substr (0, href.lastIndexOf ("/")); 

            element.innerHTML = con.responseText; 

            element.pullCssJs (folder); 
           } 
           else { 
            alert ("Error"); 
           } 
          } 
         } 

         event.preventDefault(); 
        } 
       }, false); 
      }, false); 
     </script> 


     <style> 
      #element { 
       border: 1px solid black; 
       margin: 20px; 
       padding: 20px; 
      } 
     </style> 

     <title></title> 
    </head> 

    <body> 
     <a href = "folder1/index.htm">Call folder1/index.htm</a> <br /> 
     <a href = "folder2/index.htm">Call folder2/index.htm</a> <br /> 
     <a href = "folder3/index.htm">Call folder3/index.htm</a> 

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

只要把樣式（css.css）和腳本（js.js）中要加載的文件相同的文件夾和該代碼會做的伎倆。

You can download the following example:

enter image description here