使用Jquery打开对话框

Question

我试图打开一个网站(Google DialogFlow聊天BOT)在我的网站使用JQuery加载功能。

我的代码如下所示。

<a href="#" id="configs">ChatBOT</a>
<div id="configs-dialog"  title="ChatBOT">
</div>

$("#configs").ready( function() {
$( "div#configs-dialog" ).dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
<!-- On Click function for terms dialog -->
$('#configs').click(function(){ $('div#configs-dialog').dialog('open'); });

} );
<!-- load configs html -->
$(function(){
$("#configs-dialog").load("https://console.dialogflow.com/api-client/demo/embedded/bbdd7d51-741c-4308-82c0-fc70073b057e"); 
});

我无法将网站加载到对话框窗口。当我点击链接时，它会打开一个空白对话框。有谁能帮我一下吗?

Answer 1

对于这种类型的元素，您不能使用.load()，因为它只会加载元素，而不是所需的JavaScript。

当使用没有带后缀的选择器表达式的URL调用.load()时，在删除脚本之前将内容传递给.html()。这将在脚本块被丢弃之前执行它们。如果调用.load()时，在URL后面附加一个选择器表达式，那么在更新DOM之前，脚本将被剥离，因此不会执行。

由于浏览器安全限制，大多数"Ajax"申请须遵守同源政策;请求不能成功地从不同的域、子域、端口或协议检索数据。

考虑使用iFrame。

$(function() {
$("#configs-dialog").dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons: [{
text: "Close",
class: "ui-state-primary",
click: function(e) {
var results = confirm("Are you sure you want to close the ChatBOT?");
if (results) {
$(this).dialog("close");
}
return false;
}
}]
});
$('#configs').click(function() {
$('#configs-dialog').dialog('open');
$("#configs-dialog")
.html("")
.append($("<iframe>", {
class: "configs-dialog-frame",
src: "https://console.dialogflow.com/api-client/demo/embedded/bbdd7d51-741c-4308-82c0-fc70073b057e"
})
.css("height", $("#configs-dialog").height() - 5));
});
});

.ui-dialog .ui-dialog-titlebar {
display: none;
}
.ui-dialog #configs-dialog.ui-dialog-content {
padding: 0;
}
.configs-dialog-frame {
border: 0;
width: 100%;
margin: 0;
padding: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a href="#" id="configs">ChatBOT</a>
<div id="configs-dialog" title="ChatBOT"></div>