Question

我一直在尝试在Jquery对话框中加载外部网页。我尝试过iFrame，但很多网站现在都与iFrame不兼容。我能够获取外部页面的内容，但现在可以使用jQuery在div中加载它。它抛出一个错误：对象不支持属性或方法'对话' 但是，如果我用自己的字符填充div然后使用dialog属性，一切正常。这是我的代码。如果有人可以指导，我真的很感激

aspx页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>--%>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="JQ/jquery-ui.css">
    <style type="text/css">
        body {
            font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
        }

        .ui-dialog-osx {
            -moz-border-radius: 0 0 8px 8px;
            -webkit-border-radius: 0 0 8px 8px;
            border-radius: 0 0 8px 8px;
            border-width: 0 8px 8px 8px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var Button1 = $("#Button1");
            var Button2 = $("#Button2");
            var Panel1 = $("#Panel1");
            var dil = $("#dialog");
            Button1.click(function (e) {
                //Panel1.slideDown();
                alert("in");
                //dil.css("visibility", "visible");
                dil.show();
                e.preventDefault();
                $("#dialog").dialog({
                    modal: true,
                    draggable: false,
                    resizable: false,
                    position: ['right', 'bottom'],
                    show: 'blind',
                    hide: 'blind',
                    width: 500,
                    dialogClass: 'ui-dialog-osx'
                    //overflow: auto
                    //buttons: [{
                    //    text: "I've read and understand this", click: function (event, ui) {
                    //        $(this).dialog().dialog("close");
                    //    }
                    //}]
                })
            });

            Button2.click(function (e) {
                Panel1.slideUp();
                e.preventDefault();
            });

        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" runat="server" Text="Show Panel" />
            <asp:Button ID="Button2" runat="server" Text="Hide Panel" />
            <asp:Button ID="Button3" runat="server" Text="btnHTML" OnClick="Button3_Click" />
            <br />
            <br />

            <asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" Style="display: none;"
                BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
                Hello World!
            </asp:Panel>
        </div>
        <div id="dialog" runat="server" style="display:none" title="Important information">            
        </div>        
    </form>
</body>
</html>

aspx.cs

protected void Button3_Click(object sender, EventArgs e)
    {
        WebClient objWebClient = new WebClient();
        Stream objStream = objWebClient.OpenRead("http://jquery.com/");
        StreamReader objStreamReader = new StreamReader(objStream);
        string strOutput = objStreamReader.ReadToEnd();
        objStream.Close();
        objStreamReader.Close();
        StreamWriter sw = new StreamWriter(Server.MapPath("html.txt"));
        strOutput = Regex.Replace(strOutput, "<input type=\"hidden\" name=\"__VIEWSTATE\" id=\"__VIEWSTATE\" value=\".*?\" />", "", RegexOptions.IgnoreCase);
        sw.Write(strOutput);
        sw.Close();
        dialog.InnerHtml = strOutput;
    }

Answer 1

              Object doesn't support property or method 'dialog'

永远记住，如果您的其他脚本依赖于它，请首先引用您的jQuery库文件，然后引用任何其他库。这也可以作为一般做法。

所以正确的顺序应该是，

CSS文件
Jquery库文件
jQuery UI库文件
任何其他js文件/插件文件。

使用 iFrame 并不是什么大问题。 iFrame与目前大多数可用的浏览器兼容，并且可以轻松地在IE中工作：）。

只需将iFrame放在您调用dialog函数的元素（div）中。您可能需要相应地设置它们的样式。应该没有问题。 iFrame的主要目的是在当前HTML文档中嵌入另一个文档。

查看工作demo here。

注意：有些网站拒绝在iFrame中显示内容，因为他们设置了X-frame options。这也已经讨论过了here。

希望这会有所帮助，你有一个线索。

尝试将外部网页加载到框架/对话框中

1 个答案: