使用 Jquery 打开对话框

Question

我正在尝试使用 JQuery 加载功能在我的网站中打开一个网站（Google DialogFlow Chat BOT）。

我的代码如下图

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

我无法将网站加载到对话框中 window。当我单击 link 时，它会打开一个空白对话框。任何人都可以帮我解决这个问题吗？

Answer 1

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

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

考虑改用 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>

使用 Jquery 打开对话框

Open Dialogbox with Jquery

html

jquery

dialog