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>');
}
});
});
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;
}
With HTML5, is there any way in IE11/Edge to populate a sandboxed iframe (<iframe sandbox></iframe>) with HTML other than using a src url? I am looking for a solution like srcdoc which works with all other modern browsers.
Using src with a data URI is not an option according to Microsoft as it "cannot be used [to] populate frame or iframe elements." Surprisingly, this does works for me in Edge but only for data URIs with less than 4096 characters.
All other options that I have found, e.g. in Alternatives to iframe srcdoc? and Html code as IFRAME source rather than a URL do not work for a sandboxed iframe.
Assuming usage of <iframe sandbox="allow-scripts"> is desired or acceptable, a possible workaround would be using window.postMessage() with the following setup:
index.html:
<!doctype html>
<html>
<body>
<iframe onload="connectIframe()" sandbox="allow-scripts" src="iframeConnect.html" name="srcdocloader"></iframe>
<script>
var SRCDOC_HTML = '<html><body><script src="https://code.jquery.com/jquery-3.2.1.js"><\/script><script>console.log("loaded srcdoc and dependencies", jQuery);<\/script><h1>done!</h1></body></html>';
var loaded;
function connectIframe (event) {
if (!loaded) {
loaded = true;
window.frames.srcdocloader.postMessage(SRCDOC_HTML, '*');
} else {
onloadSrcdoc();
}
}
function onloadSrcdoc () {
// ...
}
</script>
</body>
</html>
iframeConnect.html:
<!doctype html>
<script>
window.addEventListener("message", handler);
function handler(event) {
if (event.source === window.parent) {
window.removeEventListener("message", handler);
document.write(event.data);
document.close();
}
}
</script>
Note that the iframe's onload event will be triggered two times. The second time will be after the srcdoc html and all its dependencies got loaded.
<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 :)
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.