load web page into div using jquery

Question

I need help. In my web page, I want that in the div "pagina", would open the link www.google.it when I click on the link without that the page executes the refresh. I've tried doing it this way but it does not work.

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

You cannot, `load()` method is an ajax shorthand method, subject to same origin policy. BTW, your click event isn't bound to any element because at time you call snippet, there is no anchor element inside DOM — A. Wolff, May 07 '15 at 16:46
Take a look at http://stackoverflow.com/questions/18145273/how-to-load-an-external-webpage-into-a-div-of-a-html-page — Barry Keepence, May 07 '15 at 16:48

Samuel Imolorhe · Answer 1 · 2015-05-07T16:55:33.427

0

UPDATE: You would have to use an <iframe> to do that since it is not in the same domain.

You need to prevent the default action of anchor links when they are clicked by calling the event.preventDefault() method before performing the load operation.

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

    // return false;
});

edited May 07 '15 at 16:55

answered May 07 '15 at 16:53

Samuel Imolorhe

664
4
10

That's kind of purpose of using `return false;` (in jQuery) which is shortcut for `event.preventDefault(); event.stopPropagation();` – A. Wolff May 07 '15 at 16:54
`You would have to use an to do that since it is not in the same domain.` Beware, mostly all major websites as goggle e.g don't allow content to be displayed inside iframe, so it won't work. The only viable solution is to proxify it server side, but need to handle inner links/img/etc src/href to be set to the proxy script too, using maybe `base` tag. So this is quite tricky to handle it correctly... – A. Wolff May 07 '15 at 16:56

score 0 · Answer 2 · answered May 07 '15 at 17:11

0

hope it's work for you:

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

answered May 07 '15 at 17:11

Payer Ahammed

887
1
5
16

in the body I change in: or I keep div? – Simone Clementi May 07 '15 at 17:29

load web page into div using jquery

2 Answers2