I want to make a iframe which will change it's src="" if current link in src="" is down or other errors.
It will show this if this page is up!
<iframe src="http://test1.com"></iframe>
If http://test1.com is down it will show http://test2.com
You could have a function run after a timeout which changes the iframes src, with an onload function of the iframe canceling the timeout.
<iframe src="http://test1.tld" id="testIframe" onload="cancelTimeout()"></iframe>
<script>
var iframeLoadTimeout=window.setTimeout(
function(){
document.getElementById("testIframe").src="http://test2.tld";
},
10000
);
cancelTimeout=function(){
try {
window.clearTimeout(iframeLoadTimeout);
} catch(e) {}
};
</script>
JAVASCRIPT: The first thing you may want to do is check if the site is up or down.
Just plant an image from the remote site hidden into your site and monitor the load HTTP response status of this image. This might need some tweaks for true cross-browser compatibility. You can see #Spliffster answer to that on this question: Here
If it is down you can change the URL of the iframe by doing something like this:
document.getElementById('iframeid').src = "http://test2.com";
Related
fellow programmers!!! I know this sounds really dumb, but I'm currently trying to embed an iframe in a website. I want the website to ask the user for a website... then when that happens it activates the iframe code. here is my idea for code to give you a better idea...
<iframe src = "http://" + input></iframe>
obviously this doesn't work, even I know that... but what would make this work? or if it doesn't work, is there any way to unblock a website from a school chromebook, or could I write a program that could do that. :) This probably won't get answered because it's extremely stupid, but I'd love any help I can get.
Try this
<HTML>
<iframe id="urlframe" src=""></iframe>
<script>
function askforsite() {
var url = prompt("Enter site URL: ");
document.getElementById("urlframe").setAttribute("arc", "http://"+url);
}
</script>
<body onLoad="askforsite();"></body></HTML>
Very similar, but with a form so you can reuse it:
<input type="text" id="url">
<button onclick="showURL()">Show Website</button>
<iframe id="newPage" src = ""></iframe>
<script>
function showURL() {
var url = document.getElementById("url").value;
document.getElementById('newPage').src = url;
}
</script>
You may have some issues with "Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'" from some sites though.
We'd like to show a "Loading..." image when the page is still being transferred. Pages can get quite large in our application. I tried with a separate page that displays the image and then loads the intended page, but the animated GIF just stops.
Can something be done on the page itself?
Or is there a better way?
Thanks for your comments, as always!
UPDATE
Here's the general idea of my small switching page:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:div
style="width:84.0px;height:84.0px;position:fixed;top:50%;left:50%;margin-top:0px;margin-left:0px;height:0px;width:0px;z-index:1000"
id="AjaxLoader">
<xp:image url="/loading.gif" id="image1">
</xp:image>
</xp:div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
Loading a "loading" page prior than the one you want to load is not an option.
You can create to DIVs in your HTML: one for the loading icon (e.g. with id="loadingIcon"), second one for the content (id="contentWrapper"). The second one is hidden (CSS style="display:none").
Define a Javascript function like this:
function pageLoaded(){
document.getElementById("loadingIcon").style.display = "none";
document.getElementById("contentWrapper").style.display = "";
}
The script is called in the BODY's onLoad event like this:
<body onload="pageLoaded()">
...
</body>
It is not a question of the web-server environment, but how you organize your code :-)
Take your approach and modify it slightly. Instead of location.href = href - which just triggers a reload, use an ajax call and replace your loading div. Something like this:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
$.ajax({
url: "test.html",
context: $("#{id:AjaxLoader}");
}).done(function(result) {
$( this ).replace(result);
});
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
(contains typos, adjust as needed)
To answer my own question: No, it's not possible, but there is a nice way around this, in my case anyway.
The trick is to open a new browser window, write something in it and then allow the new page to load.
var w= window.open();
w.document.write("<div style='position: fixed; top: 48%; left:40%'>Loading...</div>");
w.location.href= url;
If necessary the text can be replaced by an image and the new url can be set after a timeout.
You know those webcams you can control over the internet? When you push the button to go left, it moves to the left.. but nothing else happens on the page.. Thats what I need to create.
I have a page that allows me to control lights in my house. When I click the button, I now have it load the php script (that controls the light) in a separate frame.. but I want to get rid of this. So basically I want to create a link that will call the php in the background, but that link won't do anything to the page its on.
Any ideas?
Use a return false; in the click event:
Not Follow the Link
Explanation
The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.
The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.
You will need to use ajax to achieve such a behavior.
Links that don't do anything are basically HTML links where you bind the onclick event to a JavaScript function which returns false. This makes the links "do nothing" but still executes the JavaScript which tells the camera to go left/right.
HTML 5 let's you officially use anchor elements without a href attribute. But I would just bind a Javascript event listener to whatever element your already have. I'd even add these kind of interactive elements themselves to the DOM with Javascript, since they don't serve any purpose if a user has JS disabled.
...
will give you text that looks like a link.
If it's not really a link you may wish to consider a different kind of styling to emphasize the point and so that other underlined links show as links and this shows as something else. All depends on your needs and the situation.
I like jquery...
You will notice that the onclick function returns false. This is to stop the link from working...
<a onclick="do_it(this)" ...
then in your js
function do_it(anchor)
{
jQuery.ajax(
{
url : anchor.get_attribute('href'),
data : {whatever},
type : 'POST',
success : function(data)
{
alert('woo');
}
}
)
return false;
}
Pretty much what I'm doing here is:
So when the anchor is clicked jquery POSTs to the anchor's url. You can include data if you need to. This happens asynchronously so nothing happens on your page until jQuery gets response html(or whatever). If you want to do anything with the response you can get hold of it in the success function.
When the function returns it returns false, thus preventing the anchor from doing it's usual thing.
you talking about the javascript, create a onlick event / function and implement AJAX in specific DIV area
please check this out:
http://www.w3schools.com/ajax/ajax_examples.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//You need `ajax_info.txt` file with some content
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
You can use the following jquery solution:
HTML:
Move lights to left
JQUERY:
<script type="text/javascript">
$(document).ready(function() {
$('#link1').click(function(e) {
e.preventDefault();
$.ajax( $(this).attr('href') );
});
});
</script>
Can't believe no one has posted this yet. just use javascript void:
some click function
Its one of the oldest tricks in the book!
You need Ajax to retrieve datas from PHP without loading another page.
To "disable" the link:
Link
Or:
Link
Or just write a normal link and use jQuery (or another library) to add the event:
$('a').click(function(event) {
// the code with ajax
event.preventDefault();
});
Hi I use iframefor my facebook apps. The iframe gets a scrollbar around itself. Can you tell me how to avoid getting the scrollbar around the iframe? I currently have 2 facebook apps as iframes and one of them gets scrollbars that it shouldn't have:
http://apps.facebook.com/cyberfaze/ (has scrollbars or scroll areas around iframe that I don't want)
http://apps.facebook.com/koolbusiness/ (same CSS and has no scrollbars)
Could you help me?
Thanks
Go to your application settings on Facebook
you will find canvas settings
In the canvas settings you will find IFrame Size:
You will find two options
Show scrollbars
Auto-resize
select Auto-resize to get rid of from the scroll bars.
You will need to go to your app settings -> canvas settings -> iFrame size (as mentioned by Micheal) and set it to auto-resize.
You will also need to make sure you have body, html { overflow: hidden; } for you iframe content
Then the below will help, chuck that in and change your app id -
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxx',
status: true,
cookie: true,
xfbml: true
});
//this resizes the the i-frame
//on an interval of 100ms
FB.Canvas.setAutoResize(100);
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
There is a setting in the Facebook Developers App Setup section to set scrolling to Auto-resize. and you can add to your CSS file : html { overflow:hidden; }
Could it be that you have forgot to set the iframe scrolling attribute to "no"?
Try to change the iframe tag to this:
<iframe class="smart_sizing_iframe noresize" frameborder="0" scrolling="no" id="iframe_canvas" name="iframe_canvas" src='javascript:""' height="600px" style="height: 719px; overflow-y: hidden; ">
Hope this was what you where looking for!
Usually with iframes you can either use the CSS method setting overflow: hidden or you can use the scrolling attribute of the iframe and set it to scrolling="no".
Having looked at your examples though, I am not sure that is what is causing your issue. Facebook iframes have their own set of issues.
First go to the devloper app and edit your app settings. In the Facebook Integration area set iframe size to auto-resize. Then in your app, after FB.init, call FB.Canvas.setAutoResize. Here is a link about FB.Canvas.setAutoResize.
I've got a web page that automatically reloads every few seconds and displays a different random image. When it reloads, however, there is a blank page for a second, then the image slowly loads. I'd like to continue to show the original page until the next page is loaded into the browser's memory and then display it all at once so that it looks like a seamless slideshow. Is there a way to do this?
is the only thing changing the image? if so it might be more efficient to use something like the cycle plugin for jQuery instead of reloading your whole page.
http://malsup.com/jquery/cycle/
Here is the JS needed if you used jQuery -
Say this was your HTML:
<div class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
Here would be the needed jQuery:
$(function(){
$('div.pics').cycle();
});
no need to worry about different browsers- complete cross browser compatibility.
If you're just changing the image, then I'd suggest not reloading the page at all, and using some javascript to just change the image. This may be what the jquery cycle plugin does for you.
At any rate, here's a simple example
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
function changeImage(){
document.getElementById('myImage').src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
setTimeout(changeImage, 5000);
};
setTimeout(changeImage, 5000);
</script>
This changes the image source every 5 seconds. Unfortunately, the browser will download the image progressively, so you'll get a "flicker" (or maybe a white space) for a few seconds while the new image downloads.
To get around this, you can "preload" the image. This is done by creating a new temporary image which isn't displayed on the screen. Once that image loads, you set the real image to the same source as the "preload", so the browser will pull the image out of it's cache, and it will appear instantly. You'd do it like this:
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
var preloadImage = new Image();
// when the fake image finishes loading, change the real image
function changeImage(){
document.getElementById('myImage').src = preloadImage.src;
setTimeout(preChangeImage, 5000);
};
preloadImage.onload = changeImage;
function preChangeImage(){
// tell our fake image to change it's source
preloadImage.src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
};
setTimeout(preChangeImage, 5000);
</script>
That's quite complicated, but I'll leave it as an exercise to the reader to put all the pieces together (and hopefully say "AHA!") :-)
If you create two divs that overlap in the image area, you can load one with a new image via AJAX, hide the current div and display the one with the new image and you won't have a web page refresh to cause a the "bad transition". Then repeat the process.
If there's only a small number of images and they're always displayed in the same order, you can simply create an animated GIF.
Back in the dark old days (2002) I handled this kind of situation by having an invisible iframe. I'd load content into it and in the body.onload() method I would then put the content where it needed to go.
Pre-AJAX that was a pretty good solution.
I'm just mentioning this for completeness. I'm not recommending it but it's worth noting that Ajax is not a prerequisite.
That being said, in your case where you're simply cycling an image, use Ajax or something like the jQuery cycle plug-in to cycle through images dynamically without reloading the entire page.