Reload an HTML page just once using JavaScript - javascript

How can I reload an HTML base web page only once? I am using history.go(0); with function onLoad in body tag but i want to run it only once. Please keep in mind that I am using iframe so this is not possible to to use the below types code:
<script language=" JavaScript" ><!--
function MyReload()
{
window.location.reload();
}
//--></script>
<Body onLoad=" MyReload()" >
The above code did not work for me.
However the code below is working well but the problem is that I need it to load only once:
<BODY BGCOLOR=#FFFFFF background="../images/Index_04.jpg" onLoad="history.go(0)" >
Note: I am using two iframes when user click on main page link a page loads in iframe then I want to reload the whole page with current iframe page.

You could use a querystring at the end of the page url (e.g. ?r), and check for it before redirecting, as if it exists, the redirect is already done.
if(window.location.href.substr(-2) !== "?r") {
window.location = window.location.href + "?r";
}
Disclaimer: I agree with others that you probably have a better solution - and should never need to refresh 'just once'.
Explanation of use
At the bottom of your page, just above the </body> you should put this:-
<script type="text/javascript">
if(window.location.href.substr(-2) !== "?r") {
window.location = window.location.href + "?r";
}
</script>
That's it.

<script type="text/javascript">
$(document).ready(function(){
//Check if the current URL contains '#'
if(document.URL.indexOf("#")==-1)
{
// Set the URL to whatever it was plus "#".
url = document.URL+"#";
location = "#";
//Reload the page
location.reload(true);
}
});
</script>
Due to the if condition the page will reload only once. Hope this will help.

Here is another solution which works for me using localStorage. In this solution we don't need to modify existing url.
<script type='text/javascript'>
(function()
{
if( window.localStorage ){
if(!localStorage.getItem('firstReLoad')){
localStorage['firstReLoad'] = true;
window.location.reload();
} else {
localStorage.removeItem('firstReLoad');
}
}
})();
</script>

The only way I can think of to do this is by using cookies (or if your on the right platform, sessions) and flag the first time it has reloaded, variables might also work in this case, because we're speaking about IFRAME, but I have never tried such thing.

Related

Need Condition for This Script To Redirect The Page if #wrapper is hide

JavaScrpt expert,
i want if the below script exist in my template coding then my page should redirect to example.com
<script>
$(document).ready(function(){
$("#wrapper").hide();
})
</script>
if the above script exist in my template, then it should redirect to example.com
Attention: please add some condition in that script like this:
<script>
$(document).ready(function(){
If
//#wrapper is hide
$("#wrapper").hide();
//then it should redirected to example.com
</script>
I hope someone will figure out and will share code with me. thanks.
If you need this functionality somewhere after the bit of code you show, this would work:
var $wrapper=$("#wrapper");
if($wrapper.length>0 && !$wrapper.is(':visible')){
// #wrapper exists on the page but is not visible, redirect user
window.location.href = "http://example.com";
}
What Taplar says is:
<script>
$(document).ready(function(){
// $("#wrapper").hide();
window.location.href = "http://example.com";
})
</script>
If you need this behaviour in another place in your code, then see DelightedD0D answer.
Very good point by DelightedD0D, I've fixed the code. ;)
DelightedD0D, I'd give you another point if I could.

Limiting Popup to load on homepage- Shopify

I want this script to load only on homepage, at the moment it is opening in all the pages on my Shopify store. I am using QuickShop Theme. Below is the code, this code is for my newsletter popup. Any help would be appreciated. Thanks a ton in advance.
<script type="text/javascript">
jQuery(document).ready(function($){
var $_form = $('#mc-form');
var $_action = $_form.attr('action');
$_form.ajaxChimp({
url: $_action,
callback: function(resp){
//
}
});
});
$(window).load(function() {
{% if settings.popup_expires == '0' %}
$.removeCookie('popup_cookie');
{% endif %}
var $_popup_cookie = $.cookie('popup_cookie');
if ($_popup_cookie == undefined){
setTimeout(function(){
$('#mc-form-fancybox').fancybox({
'beforeClose': function(){
if($("#mc-popup-hide").is(':checked')){
$.cookie('popup_cookie', 'yes', { expires: {{settings.popup_expires}} });
}
else{
// no set cookie
}
}
}).trigger('click');
}, 1000);
}
});
</script>
Instead of putting your script in theme.liquid, try putting it in index.liquid instead. theme.liquid is rendered for every page on your site, but index.liquid is your homepage template.
There are many possible ways to do this. You could only include the script on your home page, that way it would only fire on the page its getting loaded on. If you can't do this you can always interrogate the window.location property to work out what page you are.
Try putting window.location into the JavaScript console of your browser and see what comes back. You'll get properties such as host (e.g. stackoverflow.com), href (e.g. Limiting Pop to load on homepage- Shopify), pathname (e.g /questions/23427460/limiting-pop-to-load-on-homepage-shopify) and more.
Using this you can work out if you are on the homepage or not and not fire your fancybox.
There are many other possibilities as well, that's just off the top of my head. I would recommend just making sure it is included in just your home page if you can, but if not the window.location property may help.

Creating link with javascript

I am trying to create a link in JS that moves the person the page from where he has come from. Here is the code.
<script language="javascript">
function Jump()
{
document.href=document.referrer;
}
</script>
Here is the html,
Skip and Continue
Now when the user clicks on the link, nothing happens. Please guide me where I am doing wrong. Thanks
how about using the below code to move back
history.back();
Many browsers will not use document.referrer for privacy reasons, especially if the referrer is from another domain.
Instead, try onclick="history.go(-1)" instead of your Jump() function.
It is better to bind a click listener than use onclick.
Try changing it to this:
<a id="myLink" href="#">Skip and Continue</a>
And Javascript:
<script type="text/javascript">
document.getElementById('myLink').addEventListener('click', function(e) {
e.preventDefault();
document.location.href=document.referrer; //actually better as "history.back()"
}
</script>
It is not document.href but window.location.href...
<script>
function Jump(){
if(document.referrer)location.href=document.referrer;
else history.back();
}
</script>
(If you used the jump to get to the current page, there is no referrer.)

Is it possible to override javascript in an iFrame from the parent? If so how?

I'm using the Telerik RadSpell control in one of our touchscreen applications. I've managed to style it just right however the darn thing uses window.alert and window.confirm for prompting the user if they want to keep changes etc.
I want to disable these alerts without having to pull apart and modify the telerik controls.
The issue is that the spellcheck dialog uses an iframe and I can't seem to override the window.confirm function inside the iframe.
Sample Code to test overriding confirm.
<!-- mainpage.htm -->
<html>
<head>
<script type="text/javascript">
window.confirm = function(msg){ alert(msg); }
confirm("Main Page Confirm");
</script>
</head>
<body>
<iframe src="./iframepage.htm" >
</iframe>
</body>
</html>
<!-- iframepage.htm -->
<html>
<head>
<script type="text/javascript">
confirm("iframe confirm");
</script>
</head>
<body>
Some content.
</body>
</html>
Results in
Is it possible to override the javascript in an iframe from the parent? If so how?
I just shared an easier solution in the first forum, which demonstrates how to override the cancelHandler and hide the confirm dialog.
For your convenience I am pasting the solution below:
I would propose an easier way to disable the popup and it is to override the cancelHandler function. To do that follow the steps below:
1) Create a JS file named dialog.js in the root of the web application and populate it with the following function:
Telerik.Web.UI.Spell.SpellDialog.prototype.cancelHandler = function (e) {
if (this._cancel.disabled) {
return $telerik.cancelRawEvent(e);
}
//changes will be applied only if spell handler response is received, text has changed
//and the user confirms
this.closeDialog(this._spellProcessor && this._spellProcessor.textChanged() && true);
return $telerik.cancelRawEvent(e);
}
2) Save the file and set the DialogsScriptFile property of RadSpell to point to this file, e.g.
3) Test the solution.
I hope this helps.
You can get a reference to the innerwindow using javascript IFF the frame is from the same exact domain as the parent.
//Get iframe element by getElementById, frames[0], or whatever way you want
var myFrame = document.getElementById("myFrame");
//Get the window of that frame, overwrite the confirm
myFrame.contentWindow.confirm = function(msg){ alert("I overwrote it! : " + msg); }
You should be able to:
document.getElementById('iframe').contentWindow.confirm = [this is confirm in the iframe];
Perhaps something like this might work nicely for you:
document.getElementById('iframe').contentWindow.confirm = window.confirm;
This would link the confirm of the iframe to the confirm of the parent, which is nice if you already have some handling for confirms in the parent.
Note that you also will want to add some handling for possible undefined objects.
var iframe = document.getElementById('iframe');
//iframe exists
if(iframe){
var iframe_window = document.getElementById('iframe').contentWindow;
//window exists (won't if frame hasn't loaded)
if(iframe_window){
iframe_window.confirm = window.confirm;
}
}
You can take a look at the following resources, which could be helpful for your scenario:
http://www.telerik.com/community/forums/aspnet-ajax/spell/how-do-i-turn-off-the-confirm-dialog.aspx
and
http://www.telerik.com/help/aspnet-ajax/spell-client-check-finished.html
They show how to remove the RadSpell confirm and alert popups.
Best regards,
Rumen

How can I fix my JavaScript page refresh

I'm trying to use jQuery to make a slightly more sophisticated page refresh. With a meta refresh, if a page fails to load once, it won't load again. I am trying to make something that will repeatedly try to load--if it fails to load once, it will try again the next time so that if the last load is successful I will see a fresh version of the page, whether or not there were intervening faults.
My code at present is:
<script language="JavaScript" type="text/javascript" src="/include/jquery.js">
</script>
<script language="JavaScript">
var delay=5*1000;
function load(){
setTimeout(load, delay);
jQuery("#content").load("calendar_internal.cgi?days=40", function(){
jQuery("#preload").hide("slow");
});
delay = 15*60*1000;
}
jQuery("#content").load("calendar_internal.cgi?days=40", load);
</script>
So far as I can tell, this is functioning as a noop. It doesn't refresh.
How can I get this to work at least at a basic level so it refreshes but one bad refresh doesn't mean that I have to reload if I want to see the page at all?
--EDIT--
What I have now is apparently working (after light testing):
<script language="JavaScript">
var placeholder = jQuery('<div></div>');
function load(){
setTimeout(load, 15*60*1000);
placeholder.load("logistic_ajax.cgi", function(){
if (placeholder.html())
jQuery('#content').html(placeholder.html());
})
}
load();
</script>
var $placeHolder = $('<div />');
$placeHolder.load(yourURL,function() {
if ($placeHolder.html()) {
$("#content").html($placeHolder.html());
}
});
or something like that. This way you are not doing all or nothing type of thing. If something messes up with the HTML coming back, you can check in your "if" condition. Not sure the particulars of the response so you would need to hash that out on your own or let me know more detail.
Cheers.

Categories