Trying to Load an external webpage into a frame/dialog

Question

I have been trying to load an external webpage in a Jquery dialog. I have tried iFrames but many websites are not compatible with iFrames now. I am able to get the content of external page but now able to load it in div using jQuery. It throws an error: Object doesn't support property or method 'dialog' However if I populate the div with my own characters and then use dialog property, everything works fine. Here is my code. Would really appreciate if someone could guide

aspx page:

<%@ 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;
    }

[___This might be able to help___](http://stackoverflow.com/a/8433429/2260614)... — Bhavik, Jul 31 '14 at 10:41

score 0 · Answer 1 · edited May 23 '17 at 12:29

              Object doesn't support property or method 'dialog'

Always remember, Reference your jQuery library file first then any other library if your other scripts are dependent on it. This can be taken as a general practice as well.

So the correct order should be,

CSS files
Jquery library file
jQuery UI library file
Any other js files/plugin files.

Using iFrame is not much of an issue. iFrame is compatible with most of the browsers available today and it works in IE with ease :).

Just put the iFrame in your element (div) on which you have called dialog function. You might need to style them accordingly. There should be no problem with this. The main purpose of iFrame is to embed another document within the current HTML document.

See the working demo here.

Note: Some websites refused to display the content in iFrame because they have set X-frame options. This has been discussed here as well.

Hope this helps and you got a clue.

Additionally, you can check your browser console to see weather there is `404 error` in loading your library files. — Rohit416, Jul 31 '14 at 11:28

Trying to Load an external webpage into a frame/dialog

1 Answers1