Develop Reference

How to open an app without redirecting the page

I currently have a button. When it's clicked I execute a javascript code.
var openAppBtn = document.getElementById("openAppBtn");
openAppBtn.onclick = function () {
var app = {
launchApp: function () {
window.location.replace("testappscheme://")
}
};
app.launchApp();
};
<a id="openAppBtn" class="btn" href="">Open KWCP App</a>
when I execute this bit of code on iOS, the page does a refresh if the app is not installed. May I ask how do I attempt to open the app without the page redirecting.

You could use an iframe to trigger the app intent. Example code for triggering the intent on the page-load for example. Just put it inside your click function.
<script type="text/javascript" charset="utf-8">
var frame = document.createElement('iframe');
frame.src = 'testappscheme:/' + window.location.pathname + window.location.search;
frame.style.display = 'none';
document.body.appendChild(frame);
// the following is optional, just to avoid an unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
</script>
Simply by clicking the button, add an iframe to your page with the schema-url.

Refreshing script without refresh the html page

Is there anyway to make it refresh the current song without refreshing the page? I have no idea how to do it. I'm not so in about JS.
var response = $.getJSON('//srvstm.com/api-json/VkZkd1JrMUZPVVZYVkRBOStS', addHTML);
function addHTML(data) {
// Getting the HTML elements to write in
var cs = document.getElementById('current-song');
var g = document.getElementById('genre');
// Setting data attributes to HTML
cs.innerHTML = data.musica_atual;
g.innerHTML = data.genero;
}
<div>
<span id="genre"></span>
<h1 id="current-song"></h1>
</div>

Finally made a script that refresh a specific content at a div.
$(document).ready( function(){
$('#song').load('http://boomerangfm.xyz/musica.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#song').fadeOut('slow').load('http://boomerangfm.xyz/musica.php').fadeIn('slow');
refresh();
}, 30000);
}
<div id="song">rádio boomerang fm</div>

jQuery $(window).load event called too early on page with iFrame

I have a JSF-Page to display another website in an iFrame:
<iframe id="frame" name="frame" style="display:none;
width: 100%; height: 700px" scrolling="yes" />
This website needs authorization which I perform with hidden input fields and a form submit with JavaScript. After the login I go to another url.
<form id="login" target="frame" method="post" action="LOGIN-URL">
<input type="hidden" name="username" value="Test"/>
</form>
<script type="text/javascript">
document.getElementById('login').submit();
var iframe = document.getElementById('frame');
iframe.onload = function() {
if (iframe.src.indexOf(REDIRECT-URL) == -1) {
iframe.src = REDIRECT-URL;
}
}
</script>
During the loading process I want to show a loading icon (contained in a div) and after the REDIRECT-URL finished loading I want to display the iFrame. So as you can see the iFrame is initially not displayed. After complete pageload I want to invoke a function to set another style class for the iFrame (and the loading div).
function changeStyle() {
document.getElementById("frame").className = "show";
document.getElementById("loading").className = "hide";
}
<script>
jQuery(window).load(function() {
changeStyle();
});
</script>
Login and navigation to the redirect url works fine, but with Chrome and Safari (Firefox works fine, didn't try other browsers) the function "changeStyle" is called directly after the login in the iFrame. So the iFrame gets displayed to early. Problem is that the redirected url takes quite some time to load and so user sees the login-landing-page too long and tries to go from here.
So how can I achieve (window).load being called after the redirect?
Already tried with
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
and
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
yourFunctionName();
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
similar questions:
Javascript that executes after page load
Show Iframe after loading content
call a function after complete page load

redirect from inside a frame to external page and "clear the frame"

I have an app that loads a page inside an iframe. Everything works well.but i am at a stage when i need to redirect to another site and its still loading this 'external site inside my frame'...this isn't what i want. How do i get rid of the frame as i no longer have need for it.
here's my controller action where i'm redirecting:
public ActionResult Finish()
{
if(!string.IsNullOrEmpty(Url))
{
string url = string.Format("{0}?code={1}",Url,code);
return Redirect(url);
}
return RedirectToAction("Index");
}
I added the iframe in my view like this:
<div>
<iframe id="paymentFrame" width="600px" height="670px" scrolling="auto" frameborder="0" src='#Url.Action("myForm")'></iframe>
</div>
<script type="text/javascript">
function sendISWPostData() {
$("#paymentFrame").load(function () {
var doc = this.contentDocument;
var form = doc.getElementById('form1');
var actionUrl = '#ViewBag.WebPayUrl';
form.action = actionUrl;
$(this).contents().find(':input[name=cust_name]').val('#ViewBag.CustName');
$(this).contents().find(':input[name=cust_id]').val('#ViewBag.CustNumber');
form.submit();
//return true;
}); //end load
} // end send
$(document).ready(function () {
sendISWPostData();
//return true;
});

Using pure javascript, within the iframe page, following line will redirect/replace the parent window:
self.parent.location.replace('www.google.com');

Indicator of loading

I am working on a project that requires a sound to play when a link is clicked. Everything works fine, I used the Javascript below. The problem is that it takes about 30 seconds (depending on internet speed) before you actually hear the file because the browser has to download it. Is there a way to adapt the code below to display an indicator that the file is loading?
<bgsound id="sound">
<script>
function PlaySound(url) {
document.all.sound.src = url;
}
</script>
and this on as the link:
Play

A forewarning that "bgsound" is proprietary to Internet Explorer, as far as I know. Having said that, you can subscribe to its "readystatechage" event to find out when it's done loading.... (untested! as I don't have IE)
<div id="soundLoading" style="display: none;"><img src="someani.gif" /></div>
<bgsound id="sound">
<script>
function PlaySound(url) {
// Setup some loading animation here......
document.all.soundLoading.style.display = "inline";
// Add event listener and set the sound source
sound.onreadystatechange = CheckSoundLoaded;
document.all.sound.src = url;
}
function CheckSoundLoaded() {
if(document.all.sound.readyState == 4) {
// sound is loaded, remove loading animation
document.all.soundLoading.style.display = "none";
}
}
</script>
http://www.highdots.com/forums/javascript/finding-when-bgsound-downloads-47830.html

Simple
The simplest method is to replace the 'Play' text for the link with 'Loading...':
<script type="text/javascript">
//<![CDATA[
function PlaySound(url, anchor) {
anchor.innerHTML = 'Loading...';
document.all.sound.src = url;
}
//]]>
</script>
Play
Here is a demo JS Fiddle.
More Advanced
Another option is to replace the anchor's text with an animated gif:
<script type="text/javascript">
//<![CDATA[
function PlaySound(url, anchor) {
anchor.innerHTML = '<img src="http://www.fordesigner.com/pic/zip/200916124527437778027.gif"/> Loading...';
document.all.sound.src = url;
}
//]]>
</script>
Play
Here is an example JS Fiddle.