How To Reload A iframe Using jQuery
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%;
开发者_如何学Python 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!!!
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());
});
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());
});
加载中,请稍侯......
精彩评论