Question

最近我被分配了一份工作来编写一个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和bootstrap文件

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文件包含模态div代码是

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

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

1 个答案: