I have written a Firefox extension that requires the background document's URL. Normally, JavaScript's document.URL could achieve this - but this is different.
Please see my example below:
As can be seen, there are 4 tabs open:
BBC Homepage
Add-ons Manager
Amazon.com
Stack Overflow
And, the page currently being viewed is StackOverflow.com (.. indeed).
My question is: how can I retrieve the URL of the user's active window? (i.e. http://www.stackoverflow.com).
Below is the panel.html code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href=panel.css rel="stylesheet" type="text/css">
</head>
<body>
<header><h3>Where aM I</h3></header>
This Mozilla extension will display the current <i>background</i> URL
<main>
<fieldset>
<legend>Click the Button</legend>
<button onclick="PageViewing()">Fetch</button>
</fieldset>
</main>
<script>
function PageViewing() {
alert(document.URL);
}
</script>
</body></html>
EDIT
If placed in the main.js file, this code snippet works:
var tabs = require("sdk/tabs");
console.log("URL of active tab is " + tabs.activeTab.url); //yields SO.com
So in the context of my example, how could I retrieve it from P-Name/lib, for use in the P-Name/data directory - as a variable?
You have to establish a communication protocol between module and content script. This is done with port.
In your main.js
panel.port.on('askactivetaburl', function(){
panel.port.emit('sentactivetaburl', tabs.activeTab.url);
})
and in your panel script
self.port.on('sentactivetaburl', function(activetaburl){
// work with activetaburl
});
self.port.emit('askactivetaburl');
Related
I'm having following problem. I have following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Me test site</title>
</head>
<body>
Click Me
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
var handler = function codeclick(event) {
var link_new = $('a').attr('co-target');
if (link_new) {
window.open(link_new, '_blank');
}
}
$('a').bind('click.codeclick', handler);
});
</script>
</body>
</html>
You can see it in action here
The expected behaviour on desktop is that the page in co-target attribute is opened in new tab/window and the one in href attribute is opened in current tab.
On internal mobile facebook browser it should open just the co-target attribute page (intended). But on Google mobile iOS app it opens the page in href attribute (unintended).
Does anyone encountered similar problem before and maybe have some clues what should I do to make it right? There is no need that the page in co-target has to open. I just want it that on both facebook and google app it open one of it, not different one in each.
I am trying to resolve why an html form will only open, open meaning showing the login fields, when the request is made with the CTRL key?. A little bizarre. This is the form in question.
In other words - choosing the link from a menu normally (normally = not holding down the CTRL key) results in the file/form not displaying the login fields - loading the a blank file/form.
Choose Heat for Edutech staff from the Helpdesk menu here edutech.org
and then try the same thing, only using the CTRL key the next time. The form should open and display the fields without the benefit of the CTRL key.
Chrome reports this error:
Uncaught SecurityError: Blocked a frame with origin
"http://heatweb.edutech.org:8180" from accessing a frame with origin
"http://edutech.org". Protocols, domains, and ports must match.
I'm sure this is the problem, just not sure how to solve it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Call Logging</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <meta http-equiv="refresh" content="5;url=http://heatweb.edutech.org:8180/HeatWebUI/calllogging/CallLogging.html"/> -->
<script type="text/javascript" language="javascript" src="calllogging.nocache.js">
alert('hi');
</script>
<script type="text/javascript" language="javascript">
(function()
{
if( window.localStorage )
{
if( !localStorage.getItem( 'firstLoad' ) )
{
localStorage[ 'firstLoad' ] = true;
window.location.reload();
}
else
localStorage.removeItem( 'firstLoad' );
}
})();
</script>
</head>
<body oncontextmenu="return false;">
<iframe id="RSIFrame_1" name="RSIFrame_1" style="width:0px; height:0px; border: 0px" src="javascript:''"></iframe>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
I added the html refresh meta tag (commented out ) and the javascript reload function. I have tried other similar javascript window relocation attempts but nothing changes the outcome. The page/form loads as a blank form - the login fields do not display unless I do one of two things.
1 - copy and paste the link to the callLogging.html file into a new browser tab
2 - Hold down the CTRL key while clicking the link that is attempting to load the form.
The behavior is the same in any of the windows browsers I have tried (FF 39.0.3, Chrome 44.0.2403.155, IE 11).
I have also tried these html and javascript solutions, with no change in behavior or the loading file.
I would like to solve the mystery of why the form fields do not display upon initial form load OR if there is a way to simulate the CTRL key depression with the link click.
Thank you for any insights - suggestions.
I was able to clear the error that Chrome reported, which lead to the workaround which I was finally able to understand by reading this post about "Domain lowering"
error reported by Chrome:
Uncaught SecurityError: Blocked a frame with origin "http://heatweb.edutech.org:8180" from accessing a frame with origin "http://edutech.org". Protocols, domains, and ports must match.
I added this javascript statement to the source (calling) file.
<script type="text/javascript" language="javascript">
document.domain = "edutech.org";
window.location = "http://heatweb.edutech.org:8180/HeatWebUI/calllogging/CallLogging.html";
</script>
I am a beginner building a Chrome extension. I have an issue using the function described in the Chrome extension developer doc to make a button to create a new tab in "popup.html". It doesn't work no matter which methods I have tried from Stack Overflow.
My code is as follows:
<html>
<head>
<title>Facebook Connect For Chrome Extension</title>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="popup.js"></script>
<script>
function showIndex(){
var index_url="/index.html",
chrome.tabs.create({
url: index_url
}),
}
</script>
<body>
<button value="tab" style="width:100px; height:100px;" onclick="showIndex();">Go to Index</button>
</body>
or
function createTab() {
chrome.tabs.create({url: "/index.html"});
}
Go to Index
Neither option seems to work.
So I wonder whether this function should be placed in background.js? If not, please tell me what's wrong with this code. Thanks in advance!
BTW I changed the URL to www.stackoverflow.com. It is still the same---not working.
It looks like you spelled create wrong in your HTML.
Your issue is probably that Chrome does not allow you to use "unsafe" code in extensions. See the documentation here. You cannot have javascript in your html. You have to subscribe to the event handler on the DOM element.
<html>
<head>
<title>Facebook Connect For Chrome Extension</title>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="popup.js"></script>
<body>
<button id="index" value="tab" style="width:100px; height:100px;">Go to Index</button>
<script type="text/javascript" src="indexStuff.js"></script>
</body>
</html>
You then need a new indexStuff.js file with this
function showIndex() {
var index_url = "/index.html";
chrome.tabs.create({
url: index_url
});
}
document.getElementById('index').addEventListener("click", showIndex);
Note, the script tag could be moved to the top if you add an event handler to check when the DOM is loaded.
function showIndex(){
var index_url="/index.html",//why are you using "," instead of ";"?
chrome.tabs.create({
url: index_url
}), //why are you using "," instead of ";"?
}
why are you using "," at the end of line, instead of ";"?
You can use window.open(url, title, options) to open a popup window via JavaScript.
options is a string containing one or more of these variables (or empty):
width width of the window
height height of the window
location URL visible or not
status statusbar visible or not
menubar menubar visible or not
directories I'm guessing this is the bookmark bar
toolbar toolbar (back, home, etc.) visible or not
resizable whether or not resizable
scrollbars whether or not to enable scrollbars
e.g.:
window.open('http://website.com/popup.html', 'Popup Window', 'width=640,height=480,location=yes,scrollbars=yes');
In Javascript, I want to open my window.html file in a popup window. But it doesn't display any text. Just a blank page.
This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript">
var newwindow;
function popit(url){
newwindow = window.open(
url, '', "status=yes, height=500; width=500; resizeable=0");
}
</script>
</head>
<body>
CLICK ME!
</body>
</html>
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>SAMPLE TEXT</p>
</body>
</html>
Why doesn't it display any text?
javascript:popit(window.html);
Replace with:
javascript:popit('window.html');
Your click handler code is syntactically incorrect:
CLICK ME!
Always, always have your developer console open to check for JavaScript errors! (edit — actually in this case there wouldn't have been an error; window.html would resolve to undefined probably! Still, keep the console open :-)
Also note that I used an "onclick" attribute instead of "href".
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.
Summary I have an app with a correctly functioning URL scheme that I'd like to launch from a web app stored on the home screen, and the normal JavaScript redirect methods don't seem to work.
Details I'm trying to create an iOS web app, to be opened in full-screen mode from a link saved on the Home Screen. The web app needs to open a specific native app. I have already registered the url scheme for the native app, and verified that it works correctly - I can open the native app by typing the scheme directly into my Safari address bar, for instance. I can also open it from other applications using the +openURL: method of UIApplication. I would like to also open it with certain arguments from a native web app that can be added to the home screen.
What I'm trying to do is use JavaScript like so inside the native app:
window.location = "myapp://myparam";
When using this code inside the web app I get an alert saying:
"Cannot Open myWebAppName - myWebAppName could not be opened. The
error was "This URL can't be shown".".
This same javascript when executed within Safari works correctly. I get the same result using window.location.replace("myapp://myparam").
The html for the web app is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Carl Veazey">
<!-- Date: 2012-04-19 -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>
<script type="text/javascript" charset="utf-8">
if (window.navigator.userAgent.indexOf('iPhone') != -1) {
if (window.navigator.standalone == true) {
window.location = "myapp://myparam";
} else {
document.write("please save this to your home screen");
};} else {
alert("Not iPhone!");
document.location.href = 'please-open-from-an-iphone.html';
};
</script>
</body>
</html>
What am I doing wrong here? I'm pretty inexperienced with javascript and mobile web so I suspect I'm just missing something obvious.
Your code works if its in mobile safari but NOT if its from a bookmark on the iOS desktop. Never tried it that way before, but thats the issue. If i just set your JS to
<script type="text/javascript" charset="utf-8">
window.location = "myapp://myparam";
</script>
It works in browser, but when bookmarked it fails. It might have to do something with how the url is loaded when its bookmarked since there is no chrome? My guess is that apple doesn't want booked mark pages to access local apps. Also, I've noticed that if I bookmark a locally hosted page, that works in mobile safari, I can't get it to load via bookmark. Its really odd....
Best recommendation I have for you is to make it
<meta name="apple-mobile-web-app-capable" />
instead of
<meta name="apple-mobile-web-app-capable" content="yes" />
This way it will be on the home screen, but will unfortunately load with the chrome. Thats the only solution I can think of.
If you need to open an iOS application if it is installed and also want to preserve your page's functionality, the location.href = 'myapp://?params=...'; won't help since if myapp:// is not registered, the redirect leads user to unreachable destination.
The safest bet seems to be in using an iframe. The following code will open an iOS app if it is installed and will not cause a failure if it is not (though it may alert a user that the page could not be reached if the app is not installed):
var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
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);
Try like this:
The index page
<html><head></head><body>
<?php
$app_url = urlencode('YourApp://profile/blabla');
$full_url = urlencode('http://yoursite.com/profile/bla');
?>
<iframe src="receiver.php?mylink1=<?php echo $app_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
<iframe src="receiver.php?mylink2=<?php echo $full_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
</body>
</html>
the receiver.php page:
<?php if ($first == $_GET['mylink1'])) { ?>
<script type="text/javascript">
self.window.location = "<?php echo $first;?>";
</script>
<?php } if ($second == $_GET['mylink2'])) { ?>
<script type="text/javascript">
window.parent.location.href = "<?php echo $second ;?>";
//window.top.location.href=theLocation;
//window.top.location.replace(theLocation);
</script>
<?php } ?>
To provide an update, iOS14 Beta7 doesn't appear to be opening any local apps via their registered x-callback URLs. 👎
<?php
// Detect device type
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
// Redirect if iPod/iPhone
if( $iPod || $iPhone ){
header('Location:http://example.com');
}
?>
The above will redirect the browser to the inputted URL (http://example.com/) if the device is an iPod or iPhone. Add the script to the top of your web app, make sure you save it as a .php file rather than .html.
Source:
http://www.schiffner.com/programming-php-classes/php-mobile-device-detection/