Javascript API zum Öffnen einer externen Seite in Popup

Question

Kürzlich wurde mir eine Aufgabe zugewiesen, eine API zu schreiben, die dem Client einen Code geben wird, damit sie auf ihrer Website mit einer Schaltfläche und einem Link zu einer externen JavaScript-Datei einbetten können. Wenn der Kunde auf die Schaltfläche klickt, öffnet sich ein Popup-Fenster mit einer externen Seite, auf der nur Kundendaten angezeigt werden.

Ich fand ein Skript im Netz, um externe Dateien in die bestehende Seite aufzunehmen.

mein HTML wird nur diese beiden Zeilen Code enthalten.

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

in externen JavaScript-Datei, die ich die Jquery bin Einfügen und Bootstrap-Dateien

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) 
} 

meine anderen JavaScript-Datei, um den Modal div Code enthalten ist

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>'; 

Wir wollen nur senden Einige Codezeilen, die der Client in seine Website aufnehmen soll, sollten über externe Dateien erfolgen. Jetzt öffnet der Button das div aber nicht im modalen und Schließen Button reagiert auch nicht. Ich hoffe, dies wird erklären, was ich erreichen möchte.

Answer 1

Der folgende Code ist ein Beispielcode, der ein neues Popup-Fenster öffnet und seinem Kopf eine externe Skriptdatei (jquery) hinzufügt.

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();