试图加载外部网页到一帧/对话框 [英] Trying to Load an external webpage into a frame/dialog

查看：249
本文介绍了试图加载外部网页到一帧/对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直试图在一个jQuery对话框加载外部网页。我曾尝试iFrame中，但很多网站现在都没有是iframe兼容。我能够得到外部页面的内容，但现在能够使用jQuery将其加载到div中。它抛出一个错误：对象不支持属性或方法对话框
但是，如果我用我自己的字符填充DIV，然后使用对话框财产，一切工作正常。这里是我的code。真的AP preciate如果有人能指导

aspx页面： 

 ＆LT;％@页面语言=C＃AutoEventWireup =真codeFILE =Default.aspx.cs继承=_默认％GT;！＆LT; D​​OCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml＆GT;
＆LT;头=服务器＆GT;
    ＆LT;标题＆GT;＆LT; /标题＆GT;
    ＆LT;％ - ＆LT;脚本SRC =脚本/ jQuery的-1.5.2.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;  - ％GT;
    ＆LT;脚本SRC =HTTP：//$c$c.jquery.com/jquery-1.9.1.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的LANGUAGE =JavaScript的SRC =htt​​p://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =JQ / jQuery的-ui.css＆GT;
    ＆LT;风格类型=文/ CSS＆GT;
        身体 {
            字体：正常正常正常10px的/ 1.5宋体，黑体，无衬线;
        }        的.ui-对话框的OSX {
            -moz-边界半径：0 0 8像素8像素;
            -webkit-边界半径：0 0 8像素8像素;
            边界半径：0 0 8像素8像素;
            边框宽度：0 8像素8像素8像素;
        }
    ＆LT; /风格＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（文件）。就绪（函数（）{
            VAR Button1的= $（＃Button1的）;
            VAR将Button2 = $（＃将Button2）;
            VAR面板1 = $（＃Panel1的）;
            VAR稀= $（＃对话）;
            Button1.click（函数（五）{
                //Panel1.slideDown（）;
                警报（中）;
                //dil.css(\"visibility，可见）;
                dil.show（）;
                亦即preventDefault（）;
                $（＃对话）。对话框（{
                    模式：真实，
                    拖动：假的，
                    可调整大小：假的，
                    位置：['右'，'底']，
                    显示：'瞎'，
                    隐藏：'瞎'，
                    宽度：500，
                    dialogClass：'UI的对话框的OSX
                    //溢出：汽车
                    //纽扣： [{
                    //文字：我已阅读并理解这一点，点击：函数（事件，UI）{
                    // $（本）.dialog（）对话框（关闭）。
                    //}
                    //}]
                }）
            }）;            Button2.click（函数（五）{
                Panel1.slideUp（）;
                亦即preventDefault（）;
            }）;        }）;
    ＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT;表ID =form1的=服务器＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT; ASP：按钮的ID =Button1的=服务器文本=显示面板/＆GT;
            ＆LT; ASP：按钮的ID =Button2的=服务器文本=隐藏面板/＆GT;
            ＆LT; ASP：按钮的ID =按钮3=服务器文本=btnHTML的OnClick =Button3_Click/＆GT;
            ＆LT; BR /＆GT;
            ＆LT; BR /＆GT;            ＆LT; ASP：面板=服务器ID =Panel1的高度=185pxWIDTH =320px的风格=显示：无;
                背景色=＃FFFF99BORDERCOLOR =黑色边框=实边框宽度=2px的＆GT;
                你好，世界！
            ＆LT; / ASP：面板＆gt;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV ID =对话框中的=服务器的风格=显示：无称号=重要信息＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

aspx.cs 

 保护无效Button3_Click（对象发件人，EventArgs的发送）
    {
        Web客户端objWebClient =新的WebClient（）;
        流objStream = objWebClient.OpenRead（http://jquery.com/）;
        StreamReader的objStreamReader =新的StreamReader（objStream）;
        字符串strOutput = objStreamReader.ReadToEnd（）;
        objStream.Close（）;
        objStreamReader.Close（）;
        StreamWriter的SW =新的StreamWriter（使用Server.Mappath（html.txt））;
        strOutput = Regex.Replace（strOutput，＆LT;输入类型= \\隐藏\\NAME = \\__ VIEWSTATE \\ID = \\__ VIEWSTATE \\价值= \\* \\/＆gt;中？ RegexOptions.IgnoreCase）;
        sw.Write（strOutput）;
        sw.Close（）;
        dialog.InnerHtml = strOutput;
    }


解决方案

 对象不支持属性或方法对话框

一定要记住，首先引用您的jQuery库文件，那么任何其他库，如果你的其它脚本依赖于它。这可以被看作是一个一般的做法为好。

所以，正确的顺序应该是，


  • CSS文件

  • jQuery库文件

  • jQuery UI的库文件

  • 任何其他js文件/插件文件。

使用的的iFrame 是没有太大问题的。 iFrame的兼容与大多数当今的浏览器，它在IE工作轻松。）

只要把iFrame的在你的元素（DIV）在其上有一个名为对话框功能。您可能需要相应的样式。应该有与此没有问题。的iFrame的主要目的是对当前HTML文档中嵌入另一个文档。

查看工作 演示这里 。

注意：有些网站拒绝显示iFrame的内容，因为他们已经设置的 X框选项 。这已被讨论<一href=\"http://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options\">here为好。

希望这有助于你得到一个线索。

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

解决方案 

              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.

这篇关于试图加载外部网页到一帧/对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆