在弹出窗口中打开外部页面的Javascript api

Javascript api to open an external page in popup

本文关键字：Javascript api 外部 窗口      更新时间：2023-09-26

最近我被分配了一份工作，要写一个api，它会给客户端一个代码，让他们通过一个按钮和一个指向javascript外部文件的链接嵌入到自己的网站中。当客户端点击按钮时，弹出窗口将打开，并显示一个外部页面，弹出窗口中只显示客户端数据。

我在网上找到了一个脚本，将外部文件包含到现有页面中。

我的html将只包含这两行代码。

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

在外部javascript文件中，我正在插入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)
}

我的另一个包含模态div代码的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，但没有处于模式，关闭按钮也没有响应。希望这能解释我想要实现的目标。

下面的代码是一个示例代码，它打开一个新的弹出窗口，并在其头部添加一个外部脚本文件（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();
相关文章：