This works …
Link text
but this doesn't …
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById("mylink");
a.onclick = function() {
parent.document.getElementById('frameName').src = 'page.html';
}
}
</script>
<a id="mylink" href="page.html">LINK</a>
Any idea why I can't get the element by id from one iFrame to another? Also I know very little code so I apologize in advance if its obvious.
First i would make sure that the security of the site within the IFrame allows you to do this kind of stuff. Check out this link:
Overcoming "Display forbidden by X-Frame-Options"
Next, i would worry about the target of your anchor tag. With specifying it will default to self. In your second piece of code the target will be _self. Thus, when you click the link your javascript will want to change the source of the IFrame while the link will want to change the entire page. I would pick either a JS or HTML implemetation of linking and not both. Here is something that i put together to show one way of changing the iFrame without an actual anchor tag.
<html>
<body>
<iframe id="frameName" src="page.html"></iframe>
<button onclick="changeFrame()">LINK</button>
<script>
function changeFrame() {
document.getElementById('frameName').src ='page2.html';
}
</script>
</body>
</html>
Related
Is there any way to show a loading image (like ajax loading gif) when I load big content with a normal request?
I have no ajax request, but a simple asp.net postback.
And I have a large site with hundreds or thousands of elements. Because of that the page needs lets say 4-10 seconds until it has completly loaded and therefore the page is a white page and no element is displayed until it has been rendered. Maybe some elements are displayed, but the browser is still rendering.
Is there any chance without using ajax etc. to show a loading image? Internet explorer preferred.
(source: kuka-robotics.com)
Add this script to your code and call init() function on onload of body tag.
<script type="text/javascript">
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
And onload of body tag call Init();
<body style="background-color:#FFFFFF;" onLoad="init()">
<div id="loading" style="position:absolute; width:200px; height:163px; text-align:center;top:310px; left:487px;">
<img src="load.gif" border=0 /></div>
....
..
</body>
Let me know is it working for u or not.
All the best.
You could create two containers:
a container with the loading image, visible from start and hidden on page load complete
a container with the content, hidden from start and made visible on page load complete
and you can use javascript to make the container visible on page load complete.
For example:
<div id="loading_container">
<img src="http://www.kuka-robotics.com/res/icn/ajax_loader.gif" />
</div>
<div id="main_container" style="display:none">
<!-- your content here -->
</div>
<script type="text/javascript">
window.onload=function(){
document.getElementById("loading_container").style.display = 'none';
document.getElementById("main_container").style.display = 'block';
};
</script>
Hi I tried in afew manners but wasnt able to make it work.
I want to make 5 attachment options in that 4 out of the 5 are hidden.
but when he clicks "more attachment" link it will show the other 4.
any ideas?
Im using ASP.NET with VB
plus if you need my code let me know!
thank you!
you can do that with many ways, one of them is enclose your 4 attachments within a div styled with display:none and by using javascript shows them in onclick events of more attachment link, something like this
<div style="display:none" id="moreattchdiv">
<!-- 1st attachment -->
<!-- 2nd attachment -->
<!-- 3rd attachment -->
<!-- 4th attachment -->
</div>
<div onclick="showmore()">more attachments</div>
<script>
function showmore()
{
var moreattachdiv = $('#moreattchdiv');
if(moreattachdiv.is(':visible'))
{
moreattachdiv.hide();
}
else
{
moreattachdiv.show();
}
}
</script>
Note I am using jquery in my script
you can test that example here
Update
insert this line into header tag of your page.If you are using master page insert it into its header tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
If you would like to do it without jquery replace the showmore() function with this code
function showmore()
{
var moreattachdiv = document.getElementById('moreattchdiv')
if(moreattachdiv.style.display=='none')
{
moreattachdiv.style.display=''
}
else
{
moreattachdiv.style.display='none'
}
}
you can test it here
You can wrap the hidden 4 attachments in a div that has the style set to display: none, then when you click the more attachments link, it would set the style of that hidden div to display: block.
Here's an example:
http://jsfiddle.net/kmmzH/
we need a kind of client-side redirection and the only options we have are:
window.location
window.open
HTTP 301, 302, 303 responses
window.location doesn't support opening the target location in a new tab or window. (I think this is related to browsing context)
window.open doesn't work in Chrome and seems to be dependent upon some client-side configurations made to the browser, which makes it a less favorable option, since we don't have control on it.
HTTP redirect response doesn't open a new tab or window, just like window.location.
Any idea?
After playing around with this for hours last night, I had a flash of inspiration this morning, and I have just tested this solution in FF3, Chrome, IE7 and IE8 - it's a bit hacky but it works in all.
<html>
<head>
<title>Redirect in a new window</title>
<script type="text/javascript">
function doIt () {
var form = document.createElement('form');
form.action = 'http://www.google.com/';
form.target = '_blank';
document.getElementById('hidden_div').appendChild(form);
form.submit();
}
</script>
<style>
#hidden_div {
display: none;
}
</style>
</head>
<body>
<div>
This is my page content<br />
This is a link to Google...<br />
...and this button will open Google in a new tab or window: <input type="button" value="Click Me!" onclick="doIt();" />
</div>
<div id="hidden_div"></div>
</body>
</html>
How It Works
You need a hidden <div> on your page somewhere that you can get a reference to in JS (no big deal - just create one with display: none).
When you want to do the redirect, use document.createElement() to create a new <form> element, assign it's action attribute with the address of the page where you want to take the user, and give it a target attribute as appropriate (I have used _blank in my example above). Then simply append it to your hidden <div> and call it's submit() method.
Hey presto, your redirect opens in a new window/tab!
Unfortunately you are still at the mercy of how the user configures their browser to handle target="_blank" but it will be either a new window or a new tab, and it should work everywhere...
Suppose we have the following HTML file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test iframe download</title>
<script type="text/javascript">
var init = 0;
function download() {
document.getElementById("dload_frame").src = "http://example.com/dload.py";
}
function alert() {
if (init == 0) {
init = 1;
}
else {
document.getElementById("alert_span").innerHTML = "Got it!";
}
}
</script>
</head>
<body>
<span id="alert_span">Main content.</span><br/>
<input type="button" value="Download" id="btn" onclick="download()" />
<iframe id="dload_frame" src="http://404.com/404" onload="alert()"> </iframe>
</body>
</html>
Now, if the URL to which iframe's src is being rewritten to (in this case - "http://example.com/dload.py") returns HTML, no problem: the onload event fires, the span's contents are replaced, everybody's happy.
However, if the content type of the file returned by the URL is set to something that forces the browser to open the save file dialog, the iframe's onload event never fires.
Is there any workaround? Using iframes isn't necessary, the desired behavior is to launch a callback after the browser begins downloading the supplied file.
I have encountered the same problem as this:
Here is my work-around, please see if it works for you:
<script>
function download(){
var url = 'http://example.com/dload.py';
var htm = '<iframe src="' + url +'" onload="downloadComplete()"></iframe>';
document.getElementById('frameDiv').innerHTML = htm;
}
</script>
<div style="display:none" id="frameDiv">
</div>
<button onclick="download()">download file</button>
As far as I can remembered iframe's onload event fires only once.
Setting another value for src attribute will not cause the onload event to fire again.
I have the same problem, onLoad handler is only fire when the content change. If you download a file. If you delete HTTP header to print file content on iframe, the onload is correctly fire.
My solution after many different approaches to get this working across ff ie safari and chrome was not have a 2 step download.
the original JS request to create an iframe loads a src that would normally have loaded the pdf
However, the src now loads a page with yet another iframe inside of it, which now contains the url of the pdf.
in the html response I trigger the onload and also a catchall setTimeout funciton which calls my response on window.parent.window.handlerfunction which my onload on the top iframe would have been. The result is a PDF download and a trigger on the top level parent of the handler function that works across the browsers since it no longer relies on detecting an actual iframe load but rather relies on supported parent/child window relationships.
hope this helps someone who was also stuck
You can check iframe readyState property repeatedly after short time intervals until it gets completed.
function iframe_onload(iframe_id, js) {
var iframe = document.getElementById(iframe_id);
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc.readyState == 'complete') {
eval(js)
return;
}
window.setTimeout('iframe_onload("' + iframe_id + '",`' + js + '`);', 100);
}
You might need help of jquery for this, for instance you can do this:
$.get('http://example.com/dload.py',{},function(result){
$('alert_span').html(result);//or some content
});
I want to show a loading image before the content of the whole page is loaded. How to achieve this? I'm working in ASP.NET.
Thank you.
NLV
You would need to use Javascript to accomplish this. My preference is jQuery. jQuery has a function that executes when the page is fully loaded, so you could set your main content div to have a css property display:none, and then when the DOM is ready, you could use jQuery to show the content:
$(document).ready(function() {
$("#myContent").css("display", "block");
});
You should initially have the image showing in your HTML, and then hide it when the page loads, like this:
Javascript:
window.onload = function() {
document.getElementById('loadingImageIDHere').style.display = 'none';
};
EDIT: The OP tagged this question as 'javascript', NOT 'jquery'!!
My personal preference is to have a loading image displayed on every page in advance and then use jQuery to hide the image once the page has loaded. It's up to you whether you want to use $(document).ready or $(window).load.
// assumes you already have a DIV#preloader container on your page centered with a loading image inside
// of it
$(document).ready(function() {
$("#preloader").hide();
});
$(window).load(function() {
$("#preloader").hide();
});