How to display user input in iframe - javascript

I have an input box for user to enter any url. Then I would like to display the website in a iframe after they click submit.
<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>
This is the closest I found online but it does not do anything:
How To Reload A iframe Using jQuery

jsBin demo
HTML:
<input type="text" id="url" name="url" value="http://" />
<iframe height="90%" width="100%" src="" id="frame"></iframe>
jQuery
$('input#url').on('input', function() {
$('#frame').attr('src', this.value);
});

Try to add the following JS / jQuery script to your code:
<script>
$(function() {
$("#load").click(function() {
var new_url = $("#url").val();
// Checks that the user typed "http://" or not
if(new_url.substr(0,7)!="http://")
new_url = "http://"+new_url;
$("#main_frame").attr("src", new_url);
});
});
</script>
So, your code will look like something like this:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
#netframe {
float:right;
height: 100%;
width: 80%;
}
#sidebar {
float:left;
height: 100%;
width: 20%;
}
</style>
<script>
$(function() {
$("#load").click(function() {
var new_url = $("#url").val();
// Checks that the user typed "http://" or not
if(new_url.substr(0,7)!="http://")
new_url = "http://"+new_url;
$("#main_frame").attr("src", new_url);
});
});
</script>
</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>
PS: Don't forget to load the jQuery library. You can load it from the web for example, by adding the following in your header:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
Hope this helps. Let me know if this works for you mate.

Related

Javascript dont take changing from textarea

I want to take all the HTML from a div container, to put it in a value in hidden field and then to show it to the users with the same CSS style but without textareas tags.
Instead of textareas, I want to show the value which came from the text fields (textarea)! So far so good!
But when a change the information in textareas my javascript code do not take the new information from that field.
What is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<?php
if(isset($_POST['save'])){
$scrita = $_POST['hid'];
$scritaInsert = strip_tags($scrita, '<p><n><nz><font><bl><br><r><chh>');
echo $scritaInsert;
exit; //just for the test
}
?>
<form method="POST">
<input type="submit" name="save" class="btn-style" value="Save" id="submitContainer"/>
<input type="hidden" name="hid" id="hid"/>
</form>
<div id="container">
<p style="text-align: center;font-weight: bold;font-size: 23px;color: black;">CocaCola</p>
<p style="text-align: center; color: black; font-size:16px; text-decoration: underline;">
The address
</p>
<p style="font-weight: bold; color: black;">
To: <textarea name="do" style="width: 920px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="font-weight: bold; color: black;">
Attention: <textarea name="vnimanieto" style="width: 830px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="text-align: center;font-weight: bold;font-size: 19px;color: black;">
CONTRACT<br>
<n style="text-align: center;font-size: 16px;color: black;">
For transport
</n><br>
<nz style="text-align: center;">№<textarea name="nomer" style="width: 60px; max-width: 100%; height: 18px;">1737</textarea>
Date:<textarea name="date" style="width: 90px; max-width: 100%; height: 18px;" id="date">25.05.2016</textarea>
</nz>
</p>
</div>
</body>
</html>
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think your problem could be the type of html slashes:
Try:
String.prototype.stripSlashes = function(){
return this.replace(/\\(.)/mg, "$1");
}
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content.stripSlashes());
});
I have changed my JavaScript to the following code and it's now working properly:
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
$("textarea").each(function() {
$(this).text($(this).val());
});
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think you should be using the method text() not html(), because html() will just copy all the text including the HTML tag, but text() will only copy the real text.
Check out this fiddle.

How to display the input value one frame to another frame onclick?

I tried to show the div tag to another frame set while checkbox click.
My index.html file is
<html>
<head>
<title></title>
</head>
<frameset cols="25%,75%">
<frame src="left-panel.html"></frame>
<frame src="right-panel.html"></frame>
</framset>
</html>
left-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</body>
</html>
right-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</body>
</html>
Then my js file is
$('.theClass').change(function(){
($('.theClass:checked').map(function(){ myfunction(this.value); }).get())
});
function myfunction(ad)
{
document.getElementById("footer").innerHTML = ad;
}
When click the checkbox I want to display these checkbox value into the footer div in another html
First define the names of the frames:
<frameset cols="25%,75%">
<frame name="left" src="left-panel.html"></frame>
<frame name="right" src="right-panel.html"></frame>
</framset>
And then in the javascript:
function myfunction(ad) {
top.left.document.getElementById("footer").innerHTML = ad;
}
You can access only to parent:
function myfunction(ad) {
parent.left.document.getElementById("footer").innerHTML = ad;
}
First, the sub-frames should have the same origin(same domain) in order to manipulate them.
Then, get the parent frame by parent.
Get the sub-frame by (according to http://javascript.info/tutorial/frames-and-iframes):
window.frames[0] - access by number
window.frames['iframeName'] - access by iframe name
So the answer is
$().ready(function(){
$("#cli").hover(function () {
parent.frames[1].$("#footer").css("visibility","visible");
},
function () {
parent.frames[1].$("#footer").css("visibility","hidden");
});
});
edit: sorry to find that the question is modified.
Each frame is a diferent web, with his own copys of the JS variables, for security reasons one page cant modify other page using JS. For example, when you call document variable from leftpanel, is diferent than the document variable called from rightpanel, and diferent tha the document variable called from index.html
Remember JS is executed in client side.
Maybe you must to use two divs:
your.css
#wrapper {
}
#left {
float: left;
width: 75%;
background-color: #CCF;
}
#right {
float: right;
width: 25%;
background-color: #FFA;
}
#cleared {
clear: both;
}
index.html
<html>
<head>
<title></title>
<link rel="stylesheet" href="your.css">
<script src="min.js"></script>
<script src="file.js"></script>
</head>
<body>
<div id="wrapper">
<div id="left">
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</div>
<div id="right">
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</div>
<div id="cleared"></div>
</div>
</body>
</html>
If you wants to use frames, maybe you must use PHP with ajax to make the changes in the server side

Why the jQuery snippet works without the IFrame, but does not with an IFrame?

Works
$("a").on("click", function(e) {
alert(1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
Does not work
$("a").on("click", function(e) {
alert(1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
<iframe id="myIframe" src="" style="width: 200px; height: 200px;" />
Because your markup is invalid. iframe is not a void element. You should close the iframe properly.
The first rendered HTML in my Chrome browser:
<html><head>
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
<script type="text/javascript">
$("a").on("click", function(e) {
alert(1);
});
</script>
</body></html>
The second one:
<html><head>
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
<iframe id="myIframe" src="" style="width: 200px; height: 200px;">
<script type="text/javascript">
$("a").on("click", function(e) {
alert(1);
});
</script>
</body>
</html></iframe></body></html>

Access child window elements from parent window using Javascript

I need to access child window elements from parent window. I have written the sample snippets below.
Parent HTML:
<html>
<head>
<title>Parent</title>
<style>
div{
float:left;
cursor:pointer;
}
</style>
<script type="text/javascript">
var SubpopUpWin="";
function Opennew(passedURL){
SubpopUpWin = window.open("popups.html", '_blank','toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes'); SubpopUpWin.document.getElementById("ifrm").src=passedURL;
SubpopUpWin.document.getElementById("ifrm_title").innerHTML=passedURL;
}
</script>
</head>
<body>
<div onclick="Opennew('http://www.google.com')">Google</div>
<div onclick="Opennew('http://www.yahoo.com')">Yahoo</div>
<div onclick="Opennew('http://www.bing.com')">Bing</div>
</body>
</html>
popups.html
<html>
<head>
<title>Child</title>
<style>
div{
float:left;
}
</style>
</head>
<body>
<div>
<div id="ifrm_title"></div>
<div style="margin-top:20px">
<iframe id="ifrm" src="" width="470" height="270" frameborder="0" style="margin-top: 34px" scrolling="no"></iframe>
</div>
</div>
</body>
</html>
In the above code is not working. Even I have used the below script also.
<script type="text/javascript">
var SubpopUpWin="";
function Opennew(passedURL){
SubpopUpWin = window.open("popups.html", '_blank','toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes');
SubpopUpWin.onload=function(){
SubpopUpWin.document.getElementById("ifrm").src=passedURL;
SubpopUpWin.document.getElementById("ifrm_title").innerHTML=passedURL;
}
}
</script>
The above code also not working.
Please share your sugestions/solutions...
Thanks
I feel this is because of some security. You can try this way instead:
<html>
<head>
<title>Parent</title>
<style>
div {
float: left;
cursor: pointer;
}
</style>
<script type="text/javascript">
var SubpopUpWin = "";
var testUrl = "";
function Opennew(passedURL){
testUrl = passedURL;
SubpopUpWin = window.open("popups.htm", '_blank', 'toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes');
}
</script>
</head>
<body>
<div onclick="Opennew('http://www.google.com')">
Google
</div>
<div onclick="Opennew('http://www.yahoo.com')">
Yahoo
</div>
<div onclick="Opennew('http://www.bing.com')">
Bing
</div>
</body>
<html>
<head>
<title>Child</title>
<style>
div {
float: left;
}
</style>
</head>
<body>
<div>
<div id="ifrm_title">
</div>
<div style="margin-top:20px">
<iframe id="ifrm" src="" width="470" height="270" frameborder="0" style="margin-top: 34px" scrolling="no">
</iframe>
<script type="text/javascript">
document.getElementById("ifrm").src = window.opener.testUrl;
</script>
</div>
</div>
</body>

Setting focus on an HTML input box on page load

I'm trying to set the default focus on an input box when the page loads (example: google).
My page is very simple, yet I can't figure out how to do this.
This is what I've got so far:
<html>
<head>
<title>Password Protected Page</title>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("PasswordInput").focus();
}
</script>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body onload="FocusOnInput()">
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<form action="verify.php" method="post">
<input type="password" name="PasswordInput"/>
</form>
</div>
</td></tr>
</table>
</body>
</html>
How come that doesn't work while this works fine?
<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("InputID").focus();
}
</script>
</head>
<body onload="FocusOnInput()">
<form>
<input type="text" id="InputID">
</form>
</body>
</html>
Help is much appreciated :-)
And you can use HTML5's autofocus attribute (works in all current browsers except IE9 and below). Only call your script if it's IE9 or earlier, or an older version of other browsers.
<input type="text" name="fname" autofocus>
This line:
<input type="password" name="PasswordInput"/>
should have an id attribute, like so:
<input type="password" name="PasswordInput" id="PasswordInput"/>
This is one of the common issues with IE and fix for this is simple.
Add .focus() twice to the input.
Fix :-
function FocusOnInput() {
var element = document.getElementById('txtContactMobileNo');
element.focus();
setTimeout(function () { element.focus(); }, 1);
}
And call FocusOnInput() on $(document).ready(function () {.....};
You could also use:
<body onload="focusOnInput()">
<form name="passwordForm" action="verify.php" method="post">
<input name="passwordInput" type="password" />
</form>
</body>
And then in your JavaScript:
function focusOnInput() {
document.forms["passwordForm"]["passwordInput"].focus();
}

Categories

Resources