2016-05-27 6 views
0

"$.getScript(fileURL)または$('body').append($('<script>', {type" 'text/javascript', src: fileURL}))を使用"と言う前に状況をお読みください。動的にJSを動的にロードするJS

私はビデオへのリンクにAmara Embedderを使用しようとしています。通常、私はjQueryとそれほど単純な作業をすることはありませんが、私はこの問題で選択肢を与えられていません。

だから、私は最初に、最も単純なオプションを試してみました:

$(function() { 
 
    $.getScript('https://amara.org/embedder-iframe'); 
 
});
<div class="amara-embed" data-height="480px" data-width="854px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

これはに似コンソールエントリで失敗します。

GET https://domain.com/embedder-widget-iframe/?data=%7B%22hei…22url%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5CKwCfLUwj4%22%7D 404 (Not Found) 

としては、例から明らかです、これはうまくいきません。問題は、スクリプトを実行し、amara.orgドメインをベースURLとして使用する代わりに、$.getScript()が実行されたドメインを使用してスクリプトが実行されることです。

JavaScriptを使用すると、SCRIPT要素を作成し、その要素をBODYに追加するだけで問題なく動作します。私は、このような同じ結果と$('body').append($('<script>', {type" 'text/javascript', src: 'https://amara.org/embedder-iframe'}))$('<script>', {type" 'text/javascript', src: 'https://amara.org/embedder-iframe'}).appendTo('body')ようにjQueryの変化を試してみた、今

https://amara.org/embedder-widget-iframe/?data=%7B%22height%22%3A%22480px%22%2C%22width%22%3A%22854px%22%2C%22url%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5CKwCfLUwj4%22%7D 

:それはamara.orgドメインからGET Sを実行しているため

window.onload = (function() { 
 
    var link = document.createElement('script'); 
 
    link.type = 'text/javascript'; 
 
    link.src = 'https://amara.org/embedder-iframe'; 
 
    document.getElementsByTagName('body')[0].appendChild(link); 
 
})();
<div class="amara-embed" data-height="480px" data-width="854px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4"></div>

は、これが成功します。

私はこれを目的の機能として識別する文書や、それがどのように回避されるかを特定することができませんでした。

+0