Javascript 使用jquery将网页加载到div中_Javascript_Jquery_Html_Css

Javascript 使用jquery将网页加载到div中

javascript jquery html css

Javascript 使用jquery将网页加载到div中,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我需要帮助。在我的网页中，我希望在div“pagina”中打开链接www.google.it，当我点击链接时，页面执行刷新。我试过这样做，但不起作用 <html> <head> <title>Home Page</title> <link rel="stylesheet" href="../jquery-ui-1.11.4.custom/jquery-ui.css"> <script src="

我需要帮助。在我的网页中，我希望在div“pagina”中打开链接

www.google.it

，当我点击链接时，页面执行刷新。我试过这样做，但不起作用

<html>
<head>

        <title>Home Page</title>

    <link rel="stylesheet" href="../jquery-ui-1.11.4.custom/jquery-ui.css">
    <script src="../jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
    <script src="../jquery-ui-1.11.4.custom/jquery-ui.js"></script>
    <script type="text/javascript">

    $("a").click(function()
    {
        $("#pagina").load($(this).attr("href"));

        return false;
    });     
    </script>
</head> 

<body class="body">

    <div id="header">
        <table border="0" cellspacing="5" cellpadding="5" align="right">
            <tr>
                <form name="ricerca" method="POST" >
                    <td><input type="text" name="nome" size="35" placeholder="Cerca Titolo, Attore, Regista, Anno"></td> <!--ENTER -->
                    <td> <input class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Accedi"></td>
                </form>
            </tr>
        </table>
    </div>
    <br>
    <div class="nav">
        <table>
            <tr>
                <td> Categorie:             
                <ul id="menu">
                    <li><a href="https://www.google.it">Animazione</a></li>
                    <li>Avventura</li>
                    <li>Azione</li>
                    <li>Commedia</li>
                    <li>Documentario</li>
                    <li>Drammatico</li>
                    <li>Erotico</li>
                    <li>Fantascienza</li>
                    <li>Horror</li>
                    <li>Musical</li>
                    <li>Romantico</li>
                    <li>Thriller</li>
                    <li>Western</li>
                </ul>
                </td>
            </tr>
        </table>
    </div>
    <div class="pagina">

    </div>

</body> 
</html>


主页
$（“a”）。单击（函数（）
{
$（“#pagina”）.load（$（this.attr（“href”））；
返回false；
});     


分类：


阿文图拉
阿齐翁
大众传媒
记录片
德拉马蒂科
情色
幻想科学
恐怖
音乐剧
浪漫主义
惊悚片
西部的

您可以使用

标签还是对象标签？尝试在此处查看更新：

您必须使用
来执行此操作，因为它不在同一域中
在执行加载操作之前，您需要通过调用
event.preventDefault（）
方法来防止锚定链接在被单击时的默认操作

$("a").click(function(event) { event.preventDefault(); $("#pagina").load($(this).attr("href")); // return false; });

希望它对您有用：

$("a").click(function(event){ event.preventDefault(); var url = $(this).attr('href'); var iframe = '<iframe src="'+url+'"></iframe>'; $("#pagina").html(iframe); });

$（“a”）。单击（函数（事件）{ event.preventDefault（）； var url=$（this.attr（'href'）； var-iframe=''； $（“#pagina”）.html（iframe）； });
您不能，
load（）
方法是一种ajax速记方法，受同源策略的约束。顺便说一句，您的click事件没有绑定到任何元素，因为在您调用snippet时，dom中没有锚元素。看看这就是使用
returnfalse的目的（在jQuery中），这是事件.preventDefault（）的快捷方式；event.stopPropagation（）由于它不在同一个域中，因此您必须使用一个来完成此操作。请注意，大多数主要网站都是goggle，例如，不允许在iframe中显示内容，因此它无法工作。唯一可行的解决方案是代理it服务器端，但需要处理内部链接/img/etc src/href，也可以使用base 标记将其设置为代理脚本。所以这是相当棘手的处理它正确…在身体我改变：或我保持div？