How To Reload A iframe Using jQuery

2019-04-12 22:19发布

站内问答 / jQuery
1992 2 5

I've created a basic browser within a browser window using an iframe:

The purpose is to allow mouse-over styling of elements using jquery ie/ highlight all links red etc... change font etc..

I've created two files:

browser.php

<html>
    <head>
        <title></title>

        <style>

        #netframe {
            float:right; 
            height: 100%; 
            width: 80%;
        }

        #sidebar {
            float:left; 
            height: 100%; 
            width: 20%;
        }

        </style>



    </head>
    <body>


    <div id="container">

        <div id="sidebar">

    Enter A URL:
            <input type="text" name="url" id="url">
            <input type="button" value="load" id="load">

            <br><br>    


        </div>

        <div id="netframe">
            <iframe height="100%" width="100%" class="netframe" src="pullsite.php" id="main_frame"></iframe>
        </div>

    </div>


    </body>
</html>

And pullsite.php

<html>

<head>

    <title></title>

    <link href="css/reset.css" rel="stylesheet" type="text/css">

    <style>
        .highlight { 
            outline-color: -moz-use-text-color !important;
            outline-style: dashed !important;
            outline-width: 2px !important;
        }
    </style>    

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



</head>

    <body>

    <div id="contents">           

    <?php echo file_get_contents('http://www.google.com/webhp?hl=en&tab=iw'); ?>

    </div>

        <script>

        $("#contents").contents().find("a").addClass("highlight");

        </script>


    </body>


</html>

Can someone please help with the jquery code I could use allow a user to enter a new url in the input field and reload the iframe.

Thanks!!!

2条回答
仙女界的扛把子
2楼-- · 2019-04-12 23:12

I'm not 100% certain but try

$('#main_frame').attr('src','http://www.google.co.uk');

I can't test this at the minute but changing the src attribute on the iframe should cause a reload based on the new value.

This could be achieved from a url in a textbox by using 

$('#load').click(function(){
    $('#main_frame').attr('src',$('#url').val());
});
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
3楼-- · 2019-04-12 23:20

Sort of a HTML:

<input type="text" name="url" id="url"/>
<input type="submit" name="go" id="go" value="Go!"/>
<iframe id="miniBrowser"></iframe>

jQuery:

$('#go').on('click', function() {
  $('#miniBrowser').attr('src', $('#url').val());
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)