jsonpでフェッチされたスクリプトタグを実行しています

編集：解決済み、以下の回答を参照してください。jsonpでフェッチされたスクリプトタグを実行しています

私が解決しようとしている問題は、jsonpで広告コードを読み込んでdomに挿入する広告読み込みスクリプトです。

時には広告コードにはjavascriptタグが含まれていることがあります。ここではstackoverflowのいくつかの投稿から、ドキュメントの先頭に移動して実行させるアイデアがあります。実験の後にこの質問をします：

Appending scripts to head using javascript - weird behavior

私の質問は解決したが、問題は、私は私のテストのdivに挿入するスクリプトが実行されない、残って、また頭に移動したときに、彼らが実行さんありました。

私はここでのコード例があります。

http://m.iijax.com/p1.html

そして、ここでは簡単なJSONP例：

http://m.iijax.com/p2.php

コードをP2には、コンソールにメッセージをログに記録しようとします、メッセージを警告し、次に印刷しようとする変数を設定すると、これらのすべてが失敗します。

eval関数を使用してこのようなコードを実行する唯一の方法はありますか、何か基本的な間違いをしていますか？ここで

は、最初の部分のコードです：この投稿へ

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
if (typeof JSONP === 'undefined') { 
    /*Lightweight JSONP fetcher - www.nonobtrusive.com*/ 
    var JSONP = (function(){ 
     var counter = 0, head, query, key, window = this; 
     function load(url) { 
      var script = document.createElement('script'), 
       done = false; 
      script.src = url; 
      script.async = true; 

      script.onload = script.onreadystatechange = function() { 
       if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { 
        done = true; 
        script.onload = script.onreadystatechange = null; 
        if (script && script.parentNode) { 
         script.parentNode.removeChild(script); 
        } 
       } 
      }; 
      if (!head) { 
       head = document.getElementsByTagName('head')[0]; 
      } 
      head.appendChild(script); 
     } 
     function jsonp(url, params, callback) { 
      query = "?"; 
      params = params || {}; 
      for (key in params) { 
       if (params.hasOwnProperty(key)) { 
        query += encodeURIComponent(key) + "=" + encodeURIComponent(params[key]) + "&"; 
       } 
      } 
      var jsonp = "json" + (++counter); 
      window[ jsonp ] = function(data){ 
       callback(data); 
       window[ jsonp ] = null; 
       try { 
        delete window[ jsonp ]; 
       } catch (e) {} 
      }; 

      load(url + query + "callback=" + jsonp); 
      return jsonp; 
     } 
     return { 
      get:jsonp 
     }; 
    }()); 
} 
JSONP.get('http://m.iijax.com/p2.php', { requestType:'demoRequest'}, function(data){ 
    var adC = document.getElementById("testId"); 
    adC.innerHTML = data.code; 
    // Move script tags to head 
    var scripts = adC.getElementsByTagName("script"); 
    for(i=scripts.length - 1;i>-1;i--) { 
     document.head.appendChild(scripts[i]); 
    } 
    // Now check value of var letsSeeIfThisIsDefined, set in the fetched code 
    console.log(letsSeeIfThisIsDefined); 
}); 
</script> 
</head> 
<body> 
    <div id="testId"></div> 
</body> 
</html>

出典

2011-07-22 f.anderzon

ありがとう：

Executing <script> elements inserted with .innerHTML

私は私のコードを少し変更することができました、私は今、データを取り出しますjsonpでフェッチされたスクリプトタグから、新しく作成されたスクリプトタグに入れて、それらを頭に追加すると動作します。 :)

はここで新しい関数parseScripts（）などの改訂コード、次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function parseScripts(elementId) { 
    // Get the div where code has been inserted by innerHTML 
    var td = document.getElementById(elementId); 
    // Find any script tags in that code 
    var scripts = td.getElementsByTagName("script"); 
    for(i=scripts.length - 1;i>-1;i--) { 
     // For each script found pick out the data 
     var elem = scripts[i]; 
     var data = (elem.text || elem.textContent || elem.innerHTML || ""); 
     // Create a new script element and add the data 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     try { 
      // doesn't work on ie... 
      script.appendChild(document.createTextNode(data));  
     } catch(e) { 
      // IE has funky script nodes 
      script.text = data; 
     } 
     // Append new script tag to head of document 
     document.head.appendChild(script); 
    } 
} 

if (typeof JSONP === 'undefined') { 
    /*Lightweight JSONP fetcher - www.nonobtrusive.com*/ 
    var JSONP = (function(){ 
     var counter = 0, head, query, key, window = this; 
     function load(url) { 
      var script = document.createElement('script'), 
       done = false; 
      script.src = url; 
      script.async = true; 

      script.onload = script.onreadystatechange = function() { 
       if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { 
        done = true; 
        script.onload = script.onreadystatechange = null; 
        if (script && script.parentNode) { 
         script.parentNode.removeChild(script); 
        } 
       } 
      }; 
      if (!head) { 
       head = document.getElementsByTagName('head')[0]; 
      } 
      head.appendChild(script); 
     } 
     function jsonp(url, params, callback) { 
      query = "?"; 
      params = params || {}; 
      for (key in params) { 
       if (params.hasOwnProperty(key)) { 
        query += encodeURIComponent(key) + "=" + encodeURIComponent(params[key]) + "&"; 
       } 
      } 
      var jsonp = "json" + (++counter); 
      window[ jsonp ] = function(data){ 
       callback(data); 
       window[ jsonp ] = null; 
       try { 
        delete window[ jsonp ]; 
       } catch (e) {} 
      }; 

      load(url + query + "callback=" + jsonp); 
      return jsonp; 
     } 
     return { 
      get:jsonp 
     }; 
    }()); 
} 

JSONP.get('http://m.iijax.com/p2.php', { requestType:'demoRequest'}, function(data){ 
    var adC = document.getElementById("testId"); 
    adC.innerHTML = data.code; 
    // Try and run the scripts 
    parseScripts("testId"); 
}); 

</script> 
</head> 
<body> 
    <div id="testId"></div> 
    <div style="height: 0px; width: 0px; border: 10px solid transparent; border-left-color: #505050;"></div> 
</body> 
</html>

出典

2011-07-26 08:50:54

「src」を持つスクリプトのsrcタグが不足していると思いますが、 – James

答えが少し肥大化しそうです。ここにあるmy version：

function execJSONP(url, cb) { 
    var script = document.createElement('script'); 
    script.async = true; 
    var callb = 'exec'+Math.floor((Math.random()*65535)+1); 
    window[callb] = function(data) { 
     var scr = document.getElementById(callb); 
     scr.parentNode.removeChild(scr); 
     cb(data); 
     window[callb] = null; 
     delete window[callb]; 
    } 
    var sepchar = (url.indexOf('?') > -1)?'&':'?'; 
    script.src = url+sepchar+'callback='+callb; 
    script.id = callb; 
    document.getElementsByTagName('head')[0].appendChild(script); 
}

出典

2012-11-05 10:38:55 Multiversum

jsonpでフェッチされたスクリプトタグを実行しています

答えて

関連する問題