ポップアップで外部ページを開くためのJavascript API

Question

最近、私は自分のウェブサイトに1つのボタンとJavaScriptの外部ファイルへのリンクを埋め込むコードをクライアントに与えるAPIを書く仕事を割り当てられました。クライアントがボタンをクリックすると、ポップアップウィンドウが開き、クライアントデータのみがポップアップに表示されます。

既存のページに外部ファイルを含めるスクリプトがネット上に見つかりました。

私のHTMLはこれらの2行のコードを含むだけです。外部で

<a id="element" data-toggle="modal" href="#myModal" class="btn btn-warning">Open Modal</a> 
<script src="external.js"></script> 

私はモーダルdivのコードを含めるようにjQueryとブートストラップファイル

function myFunction() { 
    loadjscssfile("https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js", "js") //dynamically load and add this .js file 
    loadjscssfile("http://code.jquery.com/ui/1.9.2/jquery-ui.js", "js") ////dynamically load and add this .css file 

    loadjscssfile("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js", "js") //dynamically load and add this .js file 
    loadjscssfile("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", "css") ////dynamically load and add this .css file 
    loadjscssfile("myscript.js", "js") 
} 

function loadjscssfile(filename, filetype){ 
if (filetype=="js"){ //if filename is a external JavaScript file 
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
} 
else if (filetype=="css"){ //if filename is an external CSS file 
    var fileref=document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename) 
} 
if (typeof fileref!="undefined") 
    document.getElementsByTagName("head")[0].appendChild(fileref) 
} 

私の他のJavaScriptファイルを挿入していたJavaScriptファイル私達はちょうど送りたい

var el = document.getElementById('element'); 
var body = document.getElementsByTagName('body'); 
    document.getElementById('element').onclick = function (e) { 
    e.preventDefault(); 
    document.body.innerHTML +='<div class="modal fade" id="myModal"   role="dialog">'; 
document.body.innerHTML +='<div class="modal-dialog">'; 

    <!-- Modal content--> 
    document.body.innerHTML +='<div class="modal-content">'; 
document.body.innerHTML += '<div class="modal-header">'; 
    document.body.innerHTML += '<button type="button" class="close" data-dismiss="modal">&times;</button>'; 
    document.body.innerHTML += '<h4 class="modal-title">Modal Header</h4>'; 
    document.body.innerHTML += '</div>'; 
    document.body.innerHTML += '<div class="modal-body">'; 
    document.body.innerHTML += '<iframe src="http://www.w3schools.com" style="width:100%;height:100%;"></iframe>'; 
    document.body.innerHTML += '</div>'; 
    document.body.innerHTML += '<div class="modal-footer">'; 
    document.body.innerHTML += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'; 
    document.body.innerHTML += '</div>'; 
document.body.innerHTML += '</div>'; 

document.body.innerHTML +='</div>'; 

です彼らのウェブサイトに含まれるクライアントへのコードのいくつかの行と残りは外部ファイルを介して行う必要があります。今度はボタンがdivを開きますが、モーダルではなく、閉じるボタンも応答しません。これが私が達成したいことを説明してくれることを願っています。

Answer 1

次のコードは、新しいポップアップウィンドウを開き、外部スクリプトファイル（jquery）をその先頭に追加するサンプルコードです。

var popupWin = window.open('your url', '_blank', 'scrollbars=1, location=no'); 
popupWin.document.open(); 
var jqueryScript = '<script src="https://code.jquery.com/jquery-1.12.3.js"></script>'; 
$(popupWin.document).find('head').append(jqueryScript); 
popupWin.document.close();