2013-11-04 11 views
7

HTMLタグに外部のJavaScriptファイルを動的に読み込み、広告タグをプレビューしようとしています。スクリプトはロードされて実行されますが、スクリプトには問題が正しく実行されていてもエラーは発生していない "document.write"が含まれています。私は document.write外部のJavaScriptソースを読み込むときに機能しません

  • をテストするために、同じドメインにソースを移動した場合、スクリプトは代わりのdocument.createElementとのappendChildを使用するように変更された場合は

    1. 場合、私はそれが仕事を得ることができます

      <html> 
          <head> 
           <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
           <script type="text/javascript"> 
           $(function() { 
            source = 'http://ib.adnxs.com/ttj?id=555281'; 
      
            // DOM Insert Approach 
            // ----------------------------------- 
            var script = document.createElement('script'); 
             script.setAttribute('type', 'text/javascript'); 
             script.setAttribute('src', source); 
      
            document.body.appendChild(script); 
           }); 
           </script> 
          </head> 
      
      <body> 
      </body> 
      </html> 
      

      上のコードのようにdocument.writeの。

    サードパーティによって生成され、ホストされているので、スクリプトを変更する機能はありません。

    誰かがdocument.writeが正しく動作しない理由を知っていますか?そして、これを回避する方法はありますか?

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

  • +0

    なぜ広告を表示する要素の中にスクリプトタグを置くだけではないのですか?おそらく、これは広告スクリプトの設計方法です。 – David

    +0

    私はスクリプトソースのURLをajax呼び出しで受け取っています。これは、バックエンドスクリプト – jadent

    +0

    からレンダリングすることはできません...どのように広告スクリプトは、広告を配置する場所を知っていると思いますか? – David

    答えて

    0

    (DOMの準備ができたときに)あなたははない$(function()document.writeをしたいですか

    document .readyラッパーを削除します。

    および移動あなたの前に</body>。 (またはコンテナの場所へ - あなたがウィジェットを表示する。)

    ので:重要

    <html> 
        <head> 
         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
        </head> 
    
    <body> 
    
    //bla bla... 
    
    <script type="text/javascript"> 
    
        (function(){ 
    
          var source = 'http://ib.adnxs.com/ttj?id=555281'; 
    
          // DOM Insert Approach 
          // ----------------------------------- 
          var script = document.createElement('script'); 
           script.setAttribute('type', 'text/javascript'); 
           script.setAttribute('src', source); 
           document.body.appendChild(script); 
        })(); 
    
    </script> 
    </body> 
    </html> 
    

    enter image description here

    +2

    [もちろん](http://jsbin.com/OhUDIJE/1/edit)。しかし、私はそれをしません... – David

    +0

    @デビッドはい。言葉を変えた。 :-) - 私は同じことを意味しました。 (ユーザーが自分のサイトを見ることを望むなら、彼はそれをやり遂げることはできません/してはいけません)。 –

    +0

    はい、 'document.write'を持つスクリプトが非同期にロードされている場合は、実行に時間がかかるため、おそらくDOMもクリーンアップされます。このデモをご覧ください:http://jsbin.com/OhUDIJE/2/edit – David

    1

    ロードするために潜在的に危険です外部スクリプトタグには、document.writeも含まれていれば非同期にタグ付けされます。だから私は同様にあなたの末尾にdocument.writeのいずれかを使用してお勧めします:

    document.write('\x3Cscript src="http://ib.adnxs.com/ttj?id=555281">\x3C/script>'); 
    

    それとも、スクリプトタグ(当たり前):

    <script src="http://ib.adnxs.com/ttj?id=555281"></script> 
    
    +0

    IMHO終了タグの '\ x3Cscript'の最初の' \ x3c'は必要ありません。 –

    +0

    @RoyiNamirおそらく真ですが、私はちょうど古いスニペットからそれをコピー/貼り付けています... :) – David

    +0

    URLはWebサービスからのajax呼び出しによって動的にロードされるので、スクリプトタグを使用することはできません。この場合のDocument.write – jadent

    6

    別の解決策は、その内のスクリプトをロード、その後、IFRAMEを作成することですAJAX呼び出しの準備ができているIFRAME:

    var iframe = document.createElement('iframe'); 
    document.body.appendChild(iframe); 
    var doc = iframe.contentWindow.document; 
    
    // do this whenever you want (f.ex after ajax is made): 
    doc.open(); 
    doc.write('<script src="http://ib.adnxs.com/ttj?id=555281">\x3C/script>'); 
    doc.close(); 
    

    そのように、エンド・スクリプト内document.writeは、サイトだけのiframeには影響しません。広告に合わせてiframeをスタイルする必要があります。

    +0

    これは唯一の回答かもしれません。サイズがわからないので、読み込んだ後のiframe内のコンテンツの幅と高さを取得する必要があります。ハッキーですが、おそらく動作します。 – jadent

    0

    私は同じ問題を抱えており、解決策を思いつきました。私のレイアウトはクライアント側でdom-readyの後に生成されているため、私の考えはもう少し複雑です。つまり、スクリプトをそのようにレンダリングすることはできません。これは私のための余分なステップを追加しましたが、あなたのレイアウトがサーバー側で生成されている場合は、余計なステップではないかもしれません。

    1. URLを生成します。あなたの場合には、そのAJAX要求から、私の場合は、そのユーザーとの対話
    2. リロードこのURLのページからあなたの場合

    」(多分、新しく作成したフォームを使用してサーバーへのURLをPOST)スクリプトをレンダリングできるようにするには、サーバー上にスクリプトを含める必要があります。そうすれば、実行できます。そうでない場合:

    1. サーバー側に、特定のIDを持つ非表示のdivを作成します。これにより、スクリプトがロードされ、document.writeが正しく実行されます。
    2. スクリプトを含むdivの内容をスクラップすると、htmlが変数に追加され、ページのどこにでも置くことができます!
    関連する問題