The code below which I found here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var desktopFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
mobileFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
app = "vnd.youtube://4KnNVK-udTU";
if( /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
window.location = app;
window.setTimeout(function() {
window.location = mobileFallback;
}, 25);
} else {
window.location = desktopFallback;
}
function killPopup() {
window.removeEventListener('pagehide', killPopup);
}
window.addEventListener('pagehide', killPopup);
};
</script>
</body>
</html>
Is supposed to open youtube app based on the device. If it's a mobile device's browser through which the file was opened, the video must open up in the app. The code works fine in browser like FireFox. But it is not working on chrome. The app is not being opened, instead the browser version of youtube is being opened. That implies the mobilefallback link is being called, which is not I want.
And also if clicked from somewhere it works fine. The problem is only with Chrome. I don't know if it's some kind of chrome feature...but this is not what I need. Any help?
I can use any kind of solution. Even some other way to open up links like vnd.youtube://4KnNVK-udTU this directly in app.
Sorry if this info is not enough...I'll provide whatever it takes for you to help me out. ThankYou :)
Related
on desktop, the site I made works perfectly, however on mobile, the page constantly refreshes not allowing the user to view any of the content. I was having difficulty making my site responsive, so I made a new file called mobile.html to show all of the content properly. When the screen is a certain size, the site redirects to the mobile.html. Here is the code I believe is producing the issue.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=1500px, maximum-scale=1.0" />
<script type="text/javascript">
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
document.location = "mobile.html";
}
</script>
How can I fix this issue?
Appreciate any help,
Thanks
First of all check mobile.html and make sure you don't have your forwarding code.
Alternatively you can check current page is not mobile.html.
You can use the code below this will put more control on your page.
First check if userAgent is mobile and then check if current page is not mobile.html if both true this means user is connecting from a mobile device but not viewing mobile page so forward to mobile page.
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var mobilePage = 'mobile.html';
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) && filename !== mobilePage ) {
document.location = mobilePage;
}
Try this code...
<script type="text/javascript">
if (document.location == "example.com/mobile.html") {
//do nothing
}
else if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
document.location = "mobile.html";
}
</script>
I using Benalman JS to control the back button window redirect url to home.
I tested in normal browser and Android phone, it work accordingly.
But it does not work in Ipad,
here is a part of the code.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.min.js"></script>
<script src="jquery.ba-hashchange.min.js"></script>
<script>
// control back button
// includes in js mean contains
if(!window.location.href.includes('#state')){
history.pushState(null ,document.title, '#state'); // forwards
}
// Bind an event handler.
jQuery(window).bind('hashchange', function(e) {
window.location = _contextPath + "/home/";
});
</script>
</html>
I notice that in Ipad the url will not append the "#state".
I suspect history.pushState not work in Ipad.
How can I fix this?
Thank you
The problem fixed after I change
includes
To
indexOf
Nothing to do with Benalman Js library. This js can excluded.
Thank you.
I want to add HTML to a page a certain checkbox is clicked (right now it's Reddit's 'Remember Me' checkbox, but in the future I'm want it to work with more checkboxes). I have made this content script, but I have no idea if it's doing anything to the opened chrome tab.
\\content_script.js
$(document).ready(function() {
var inputTable = document.getElementByTagName('input');
for(var i=0; i<inputTable.length; i++){
if((inputTable[i].getAttribute('type')=='checkbox') && (inputTable[i].getAttribute('name')=='rem')){
var rememberMe = inputTable[i];
}
}
document.addEventListener('DOMContentLoaded', function () {
rememberMe.addEventListener('change', changeHandler);
});
}
function changeHandler(){
if(rememberMe.checked){
var remTrack = chrome.extension.getURL ("rememberme.htm");
document.body.insertBefore (remTrack, document.body.firstChild);
}
else{
}
}
rememberme.htm is the html that I want to add containing the mp3 that I want to play (Will this work if the page isn't necessarily in HTML5?).
<!DOCTYPE html>
<html><head>
<title>Remember Me</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="HelloWorld.js"></script>
</head><body>
<audio autoplay loop>
<source src="remember.mp3" type="audio/mpeg">
</audio>
</body></html>
From what I've been reading it seems like I should just make the content script call whatever javascript that I want the open chrome tab to run, but I don't know how to do this while also inserting HTML into the open chrome tab. Any help is appreciated, and if the tag won't work if the page is not in HTML5 then what is the easiest way to play the mp3 in javascript?
Reddit is my favorite page, I guess that Redditors should stick together, so here's your script refactored.
It appends a track with 'God Save the Queen' played by United States Navy Band to Reddit homepage after clicking remember me button. When specifying audio source you need to give an url where the track is located, just like with images. You also don't need to add head and body, and the way you are fetching your html it is mistaken, you're actually getting only an url not html of your extension.
window.onload = main();
function main() {
var elem = document.getElementById('rem-login-main');
elem = addEventListener('change',changeHandler);
}
function changeHandler () {
var yourAudio = document.createElement('audio');
yourAudio.src = "http://upload.wikimedia.org/wikipedia/commons/d/de/United_States_Navy_Band_-_God_Save_the_Queen.ogg";
yourAudio.controls = true;
yourAudio.autoplay = true;
var parentNode = document.getElementById('header');
parentNode.insertBefore(yourAudio);
}
To test it go to Reddit, click F12, open chrome browser devtools console, within devtools go to tab sources, find tab snippets, right click, create new snippet, copy paste this code, save it, click play button on the right (it says 'run snippet' when you hover over it). If you want to make it an extension you need manifest.json.
Hope it works, don't remember to upvote or accept an answer if you find it useful.
My website provides iframe code which is put in some other websites.
For simplicity lets say my domain i.e the source of the iframe is www.abc.com and my client who uses my iframe code has domain www.xyz.com.
In my iframe website I try to access geoLocation of user using javascript.
When www.xyz.com is browsed on mobile, www.abc.com (in iframe) puts a confirmation box to allow or deny the access for geoLocation.
Now my issue is:-
I want to show the confirmation box only when the iframe is in the viewable area of the browser. And I want to do it without asking my clients to put any more js code in their website. It should all happen from my iframe source.
I tried the following, but visibilityChanged() gets fired only when we change the browser tab or minimize or maximize the browser...
Sample code. a.html
<!DOCTYPE html>
<html>
<head>
<script>
function onLoad() {
console.log('onload:', (document.hidden));
document.addEventListener("webkitvisibilitychange", visibilityChanged);
}
function visibilityChanged() {
console.log('visibilityChanged: ',arguments);
}
</script>
</head>
<body onload="onLoad()">
test
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<iframe style="border:1px solid red; width:200px;height:200px;" src="a.html"/>
</body>
</html>
The new PageVisibility API, which should be widely supported on mobile, looks much more promising:
Broad support: http://caniuse.com/#feat=pagevisibility
Spec: http://www.w3.org/TR/page-visibility/
Code snippet from the spec (above):
var timer = 0;
var PERIOD_VISIBLE = 1000;
var PERIOD_NOT_VISIBLE = 60000;
function onLoad() {
timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
}
function visibilityChanged() {
clearTimeout(timer);
timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
}
function checkEmail() {
// Check server for new messages
}
I'm doing some old school IE and trying to get drag and drop from windows explorer to IE working. I'm getting the drop events but the dataTransfer object does not contain the file name(s). getData("Text") is also null. What am I missing?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DnD</title>
<script src="scripts/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="dropstuff">drop stuff here</div>
<script>
$(function () {
var dropTarget = $("#dropstuff");
dropTarget.bind("dragenter dragover", function () {
window.event.returnValue = false;
return false;
});
dropTarget.bind("drop", function (e) {
window.event.returnValue = false;
var file = e.originalEvent.dataTransfer.getData("Url");
// file is null!
return false;
});
});
</script>
</body>
</html>
IE is really bad at supporting things.
You should use special plugin, i.e. https://github.com/blueimp/jQuery-File-Upload or http://www.plupload.com/ or you might want to find solution on Flash. But that might take some time.
I suggest you fix this issue organizational way: advice users to use modern browsers by showing warning of partial funcionality compatibility in IE.