スクリプトタグが入ったAJAXを使ってコンテンツをロードする

私が実際にやりたいことは、クロスドメイン制限なしで、Windows 7ガジェットのIframeのすべての機能をシミュレートすることです。 <html>,<body>、<script>タグで完全なHTMLページを読み込み、ロードされたhtmlのすべての要素が描画され、Iframeのように実行されるようにdiv/some domを読み込むことが可能です。スクリプトタグが入ったAJAXを使ってコンテンツをロードする

私は確かに同じもののライブラリが存在すると確信していますが、ここの人からの助けは非常に信頼できるので、このフォーラムに投稿してください。

ありがとうございました。

出典

2011-02-03 Neeraj

、jquery.ajax負荷funcitonを使用したデータを解析し、別のVARにスクリプトタグにデータを取得している最も簡単な方法は、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