i am trying to get a page to load using Geobytes.
<html>
<head>
</head>
<body style="background: transparent; border: none;">
<script src="http://gd.geobytes.com/Gd?pages=US&ext=html&after=-1" language="Javascript"></script><script language="javascript">// <![CDATA[
if(typeof(sGeobytesLocationCode)!="undefined"&&sGeobytesLocationCode.indexOf('US')==0)
{
document.write("<META HTTP-EQUIV='Refresh' CONTENT='06; URL=http://www.example.com'>");
}
// ]]></script>
</body>
</html>
can anyone point me in the right direction? I can get function onload to work since its a popup window.
<html>
<head>
<script src="http://gd.geobytes.com/Gd?pages=US&ext=html&after=-1" type="text/javascript"></script>
<script>
function after_load() {
if (typeof (sGeobytesLocationCode) != "undefined" && sGeobytesLocationCode.indexOf('US') == 0)
{
document.write("<META HTTP-EQUIV='Refresh' CONTENT='06; URL=http://www.example.com'>");
}
}
</script>
</head>
<body onload="after_load()" style="background: transparent; border: none;">
</body>
</html>
The load event fires when all the content on your page fully loads including the DOM (document object model) content, asynchronous javascript, frames and images.
You can also use the DOMContentLoaded event instead (faster) when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
<script>
// For legacy browsers use this instead: window.onload = function()
window.addEventListener('load', function () {
if(typeof(sGeobytesLocationCode)!="undefined" && sGeobytesLocationCode.indexOf('US')==0)
{
document.write("<META HTTP-EQUIV='Refresh' CONTENT='06; URL=http://www.example.com'>");
}
}, false);
</script>
The right answer...
The question is a bit misleading which seems to have started people down the wrong path. There is no need for a document onload handler. The code below works as expected without one.
This is an example I took from the GeoBytes site and reworked. The meta tag redirect part also works, but I've disabled it in the code posted here. The aim of the code is to automatically redirect users to a country specific page.
The GeoBytes site has many free web services and is worth a look.
Run the snippet to test:
<html>
<head>
<script src="http://gd.geobytes.com/Gd?pages=US&ext=html&after=-1" type="text/javascript"></script>
<script type="text/javascript">
// DISABLED: Redirect vistors from USA to www.whitehouse.gov by inserting a meta tag
if(typeof(sGeobytesLocationCode)!="undefined" && sGeobytesLocationCode.indexOf('US')==0) {
// document.write("<META HTTP-EQUIV='Refresh' CONTENT='0; URL=https:\\www.whitehouse.gov'>");
}
</script>
</head>
<body>
GeoBytes API
<p>
<script type="text/javascript">
document.write('sGeobytesLocationCode = ' + sGeobytesLocationCode );
</script>
</body>
</html>
Related
I am working on a legacy app that has an iframe involved. The back button is working on the iframe and I need it to bypass the iframe and work on the parent window only.
Here is a dumbed down version of the issue and description of what I know.
the main page "index.html" has an iframe that is being added via javascript. It loads a.html, makes an ajax call that then does a window.location = "b.html" At this point if you use the back button it essentiallys makes the iframe go back to a.html and then redirects to b.html so you are effectively stuck on the page. If I remove the ajax call and do an window.location on load everything works ok. However given the architecture and what happen on the page I can't remove the Ajax call from the picture.
Here is the code I am looking at, let me know your thoughts on how to solve this issue. Also I should mention in Chrome 41 this isn't an issue, however the newer chrome 48 and 49 it is an issue. I tried history.replaceState but wasn't able to figure out a way to use it in this situation that made things work.
index.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
hello world!
<div id="iframeContainer"></div>
<script>
$(function () {
var newIframe = document.createElement('iframe');
newIframe.src = "a.html";
newIframe.id = "A";
document.getElementById("iframeContainer").appendChild(newIframe);
});
</script>
</body>
</html>
a.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#F00;">
<script>
$(function(){
$.ajax({
url:"b.html",
complete:function(){
window.location="b.html";
}
});
});
</script>
</body>
</html>
b.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#00F;">
<script>
$(function(){
})
</script>
</body>
</html>
This is only possible in HTML5 compatible browsers, and it would go something like this..
This goes in the child frame..
// catch the back button click.
window.onpopstate = function(event) {
// make the parent window go back
top.history.back();
};
This also only works if both frames are in teh same domain.
I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);
I am trying to load a html, which will act as a header . The code that i have for this purpose is :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function loadContent(divName,pageURL) {
alert(divName+"--"+pageURL);
$("#" + divName).load(pageURL);
}
$(document).ready(function() {
loadContent('header','D:\\cracker\\RollingMenu\\index.html');
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
Here, i can see the alert that is popping up, when the page loads, but the header is not coming up in the page . However, when i try to access the header(index.html) using the url that i am passing , i can see the html getting rendered.
Any one , any ideas as to what i may be doing wrong here ?
In my application i have to alert user to signout on browser close.
For that i have used the javascript as below
<body scroll="no" onbeforeunload="browerClose()">
<script language="JavaScript" type="text/javascript">
function browerClose()
{
window.alert("Click OK to SignOut");
window.location.href = "http://localhost:8086/egs/ervlet?pri=logOut";
}
this is Working for IE ,but not works for FireFox,
Wats the Problem....Any Suggesstions
Thankxx in Advance,
I would suggest you move the javascript function to the head section of the HTML document. That way it is working for Firefox. Maybe this is because HTML documents are processed in sequential order and you need to define the function before you can use it.
Do something like this:
<head>
<script language="JavaScript" type="text/javascript">
function browerClose()
{
window.alert("Click OK to SignOut");
window.location.href = "http://google.com";
}
</script>
</head>
<body scroll="no" onbeforeunload="browerClose()">
<!-- you code here -->
onbeforeunload event will not work from fire fox version 26 if u used any custom alert message in your application which means you need to perform x operation when closing browser/tab or refreshing page but you put alert message in function which will be called from onbeforeunload then the x (update) operation will not happened.
<html>
<head>
<script>
function unloadfunction() {
alert('test');
// update employee ID in Database
}
</script>
</head>
<body onbeforeunload="unloadfunction();">
</body>
</html>
I am having Processing.xhtml which has
<html>
<head>
<script language="JavaScript" src="../js/processing-1.0.0.min.js" type="text/javascript"></script>
</head>
<body onload="doIt();">
<div style="clear:both; float:left;">
<canvas id="sketch" data-processing-sources="../js/k12-processing.pde"></canvas>
</div>
<script type="application/javascript">
var pI;
function doIt() {
if (!pI) {
pI = Processing.getInstanceById('sketch');
}
#{script}
}
</script>
</body>
</html>
The variable 'pI', function name, canvasId are dynamic ones.
Now i want to draw some number of shapes dynamically in different canvas positioned in different place in a page Shape.xhtml. In Shape.xhtml i am referring Processing instance like this
<ui:include src="/Processing.xhtml">
<ui:param name="script" value="#{script}"/>
</ui:include>
After including Processing.xhtml my Shapes.xhtml will look like this
<ui:composition>
<ui:define>
<html>
...
<body onload="doIt_1">
<canvas id="sketch_1">
<script>...</script>
</body>
</html>
<html>
...
<body onload="doIt_2">
<canvas id="sketch_2">
<script>...</script>
</body>
</html>
</uI:define>
The onload event in body element is not triggered properly. How to dynamically load all the scripts in a page?
Web Browsers typically only want one html and one body tag in a single page. If you really want to wait until the page has completely loaded you can use the window.onload. For example at the top of your page you can do something like:
my_funcs = [];
window.onload = function() {
for (f in my_funcs) {
f();
}
}
Then after each of your scripts you can do something like:
my_funcs.push(loadFunc);
That guarantees that each of your load functions will get executed when the page finishes loading. However, if you don't really care about the page being fully loaded you could just execute the load function at the end of each script.