<iframe id="iframe" style=" width:100%; height:500px" src="other.jsp" frameborder="0" name="myone">
<html>
<head>
<script>
$(function() {
$("#adduser1").click(function() {
alert("hiiii");
$('#iframe').attr('src', 'adduser.jsp');
});
});
</script>
</head>
<body>
<input type="button" name="AddUser" id="adduser1" value="AddUser"/>
</body>
</html>
</iframe>
here i want to load same iframe (its already loaded with other.jsp ) with other jsp adduser.jsp on triggering of inside event of same iframe
its alerting with 'hiiii' but not loading with jsp page
You should not use
$('#iframe').attr('src', 'adduser.jsp');
inside the self iframe. Use
window.location = 'adduser.jsp'
Looking at your code, it should work and it works for me.
The constraint may be the path of the file.. If that is not the case.
Please try to reload the your iframe.
//Reload iframe
$('#iframe').attr('src', $('#iframe').attr('src'));
Just try this... this may help you!!
DEMO...
You are trying to load the iframe from a button which itself is inside the iframe, it will never work that way. You should use window.location for this
$(function() {
$("#adduser1").click(function() {
window.location = 'adduser.jsp'
});
});
Hope this helps :)
Related
I'm trying to put text on my page. can I input a text file?
<div class="container">
<input type="file" src="pone.txt">
</div>
like this well not like this as this don't work, please help, thanks a newbie.
you can use an iframe inside of a paragraph to do it, like i am showing below
<p><iframe src="name_of_your_text_file.txt"></iframe></p>
</body>
You can use the embed HTML element.
<embed src="phone.txt">
MORE INFORMATION ON EMBED TAG
If you have access to a server side scripting language, it would be a little neater to do:
<div>
<?php include('phone.txt'); ?>
</div>
If you want to use jQuery you can do it via:
$(function () {
$.get('/phone.txt', function (data) {
consile.log(data);
});
});
You cannot easily do that with HTML alone. You have to employ some JavaScript.
<!DOCTYPE html>
<html>
<body>
<input type='file' name='pone' id='pone'>
<pre id='sameOutput'> </pre> //this will render the text file as it is in the file directly on the webpage.
<script type='text/javascript'>
document.getElementById('pone').addEventListener('change', function (){
var myfile= new FileReader();
myfile.onload = function (){
document.getElementById('sameOutput'). textContent = myfile.result;
}
myfile.readAsText(this.files[0]);
})
</script>
</body>
</html>
On my index page there are two links for Login and Signup and one iframe
I have designed both(Login and signup) pages separately
Now i want to force both pages to be opened only in iframe not in a separate tab
and if someone tries to access directly redirect them to index page.
here is my code...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Login Signup
<iframe src="" name="frame" frameborder="0"></iframe>
</body>
</html>
You can add the following to the head of your HTMl document to make it automatically redirect if it is not loaded inside an iframe:
<script>
window.onload = function(){
if (top === self) {
//not inside iframe
location = 'url';
}
}
</script>
JSFiddle: http://jsfiddle.net/xjqyrsd7/
I just found the Best way to do it with Javascript..
var myUrl = 'http://localhost/test/index.php';
if(window.top.location.href !== myUrl) {
window.top.location.href = myUrl;
}
Is there a way that I can load only Iframe on button click instead of whole HTML page.
Thanks in advance.
Within your onclick handler just:
document.getElementById("iframe_id").contentWindow.location.reload();
or
document.getElementById("iframe_id").src = document.getElementById("iframe_id").src
try this one:
onClick='document.getElementById("ifr").src="add_dossier.php";'
or
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="http://google.com" width="700" height="450"></iframe>');
}
});
});
I need to display content(present in another HTML) in an iframe inside an already present HTML page. The iframe should first check if there is some content in the HTML, and only load if there is, if the source HTML is empty the iframe should not load.
Thank You
You'll have to use Javascript for this.
Your parent HTML file:
<html>
<!-- Your parent html file contents -->
<iframe id="iframe" src="">
</iframe>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
//get your iFrame html file
$.get("iframe.html", function(data) {
//check if file not empty
if(data) {
$("#iframe").attr("src", "iframe.html");
} else {
$("#iframe").css("display", "none");
}
});
});
</script>
</html>
To check wether the content is present in the iframe use this(it uses jQuery and let the id of iFrame be iframeid):
<!--free.htm -->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$.get("test.htm", function(){
if($(this).contents().find("body").length<=0)
$("#iframeid").css("display","none");
});
});
</script>
</head>
<body>
<iframe src="test.htm" id="iframeid"></iframe>
</body>
</html>
Here are dome links that might be of help to you :
http://www.w3schools.com/jquery/
http://api.jquery.com/contents/
I have a html page.
html page has a iframe.
when I submit the form inside iframe, returned result is displayed inside that iframe.
How to display that result in parent of iframe??
<script type="text/javascript">
$(document).ready(function () {
$("#test").load(function (e) {
var htmlFromServer = $(e.target).contents().find("html").html();
});
});
</script>
<iframe id="test" src="HTMLPage1.htm"></iframe>
All you need to do is handle the onload event of the iframe. This event is triggered when the iframe receives response from the server.