I am developing an addon for firefox using addon-SDK method. I would like to know if there is anyway to change the html(contentURL) displayed in that panel to a new webpage upon clicking a link in that contentURL. Thanks in advance.
Vignesh here's code that receives the url clicked on:
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel#Scripting_panel_content
var myScript = "window.addEventListener('click', function(event) {" +
" var t = event.target;" +
" if (t.nodeName == 'A')" +
" self.port.emit('click-link', t.toString());" +
"}, false);"
var panel = require("sdk/panel").Panel({
contentURL: "http://www.bbc.co.uk/mobile/index.html",
contentScript: myScript
});
panel.port.on("click-link", function(url) {
console.log(url);
});
panel.show();
So then you can change that to be instead of console.log(url) you can make it find your panel and changes its iframes location to that url. Im not sure how to do this with sdk methods, maybe someone else can share. I would try to do this though:
panel.port.on("click-link", function(url) {
panel.contentURL = url;
});
edit:
panel.contentURL = url may not work so you have to do it like this:
const { getMostRecentBrowserWindow } = require('sdk/window/utils');
var aXULBrowser = getMostRecentBrowserWindow();
aXULBrowser.getElementById('ID OF YOUR PANEL, probably same as id to your widget here').getElementsByTagName('iframe').contentWindow.location = url;
Related
I use an anchor tag to provide my users with an option to download some client side generated data in a file. I use the following code:
function GenerateTextFile (FileType, FileName, FileContents)
{
var data = new Blob ([FileContents], {type: 'text/plain'});
var url = window.URL.createObjectURL (data);
var link = document.createElement ("a");
link.download = FileName + "." + FileType ;
link.href = url ;
link.innerText = " Click here to download" ;
};
Later on I invoke the following to tidy up :
window.URL.revokeObjectURL (url);
Please can someone tell me how I can detect that the user has clicked on the anchor tag? I would like to either remove or change the text so that the download is not activated twice.
function GenerateTextFile(FileType, FileName, FileContents) {
var data = new Blob([FileContents], {
type: 'text/plain'
});
var url = window.URL.createObjectURL(data);
var link = document.createElement("a");
link.download = FileName + "." + FileType;
link.href = url;
link.innerText = " Click here to download";
link.id = Date.now();
link.setAttribute("onclick", "removeDownload('" + link.id + "')");
let links = document.getElementById("links");
links.appendChild(link);
};
function removeDownload(id) {
document.getElementById(id).remove();
}
<button onclick="GenerateTextFile('txt','test','lorem ipsum');">Create Dummy DL</button>
<div id="links"></div>
Note: The download of the file won't work within the snippet. It works outside of the sandbox though. This uses the onclick event of the a element with a dynamic id (epoch) which then just calls the removeDownload method, which will get the a element by its id and remove it.
You can add a click listener to the link. Or is there some reason you don’t want that?
link.onclick = function(){console.log("link was clicked");}
I have the following code which redirects to a random webpage although it does so by opening a new tab which is often blocked by web browsers. Can this be amended to open the new site in the same tab?
Thanks in advance
<script>
var links = [ "google.com",
"youtube.com",
"reddit.com",
"apple.com"]
var time = 3000;
var openSite = function() {
var randIdx = Math.random() * links.length;
randIdx = parseInt(randIdx, 10);
var link = 'https://www.' + links[randIdx];
return link;
};
setTimeout(function(){
open(openSite())
}, time);
</script>
enter image description here
Maybe something like:
window.location.href = openSite();
I would like to be able to set a link/permalink to each notification, so when user clicks on it; then he is taken to the permalink location,
I've seen this answer which has a solution that's a little bit different because static link is used,
I would like to, somehow:
var noti = window.webkitNotifications.createNotification(
'http://funcook.com/img/favicon.png',
'HTML5 Notification',
'HTML5 Notification content...',
'http://mycustom.dynamic.link.com/' /* invented code */
)
noti.onclose = function(){ alert(':(') };
noti.onclick = function(){
window.location.href = $(this).url; /* invented code */
};
noti.show();
Any chance? (I really don't like the static html file solution... I would like to keep this syntax)
How about something like this?
var createNotificationWithLink = function(image, title, content, link) {
var notification = window.webkitNotifications.createNotification(image, title, content);
notification.onclose = function() {
alert(':(');
};
notification.onclick = function() {
window.location.href = link;
};
return notification;
};
Now you can call createNotificationWithLink whenever you want to create a notification:
var noti = createNotificationWithLink(
'http://funcook.com/img/favicon.png',
'HTML5 Notification',
'HTML5 Notification content...',
'http://mycustom.dynamic.link.com/'
);
noti.show();
You can also move noti.show(); into the createNotificationWithLink function if you like (notification.show();). I don't know if you want the notification to be shown automatically when you create it...
You can pass a data property that you can read from within the onclick event handler as e.target.data.
var notification = new window.Notification("Hello!",
{
body: "Hello world!",
data: "https://www.example.com/?id=" + 123
});
notification.onclick = function(e) {
window.location.href = e.target.data;
}
noti.onclick = function() {
window.open("http://www.stackoverflow.com")
};
More on how to use window.open: http://www.w3schools.com/jsref/met_win_open.asp4
HTML5 Notification Resource: http://www.html5rocks.com/en/tutorials/notifications/quick/ (If this doesn't answer you're question)
For Each one you could have:
var noti1 = window.webkitNotifications.createNotification(
'http://funcook.com/img/favicon.png',
'HTML5 Notification',
'HTML5 Notification content...',
var noti2 = window.webkitNotifications.createNotification(
'http://funcook.com/img/favicon.png',
'HTML5 Notification #2',
'HTML5 Notification #2 content...',
etc
and then
noti1.onclick = function() {
window.open("http://www.stackoverflow.com")
};
noti2.onclick = function() {
window.open("http://www.example.com")
};
hope that helps :)
You can add the url as a property to 'noti', then call that property with this.yourpropertyname
example:
noti.myurl = 'http://stackoverflow.com';
...
noti.onclick = function(){
window.location.href = this.myurl;
};
hope this helps.
For anyone, who needs to open a new browser window(tab), but does not want the parent window(tab) to be replaced and focused upon notification click, this code snippet will do the trick:
var notification = new window.Notification("Hello!", {
body: "Hello world!",
data: "https://www.google.com/"
});
notification.onclick = function(event) {
event.preventDefault(); //prevent the browser from focusing the Notification's tab, while it stays also open
var new_window = window.open('','_blank'); //open empty window(tab)
new_window.location = event.target.data; //set url of newly created window(tab) and focus
};
This is driving me crazy right now!
var url gets defined longer up.
url = url + ".jpg";
var fileRequest:URLRequest = new URLRequest(url);
That's doesn't work for some reason... the ".jpg" doesnt get added. BUT, if I try to do this:
url = ".jpg" + url;
var fileRequest:URLRequest = new URLRequest(url);
It works, but I don't want the .jpg to be at the begining of the url ofcourse...
Try
url += ".jpg";
Or
url = String(url)+".jpg";
I've been looking all day for the same problem. Came across this thread on my way through. Found the solution.
https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/URLVariables.html
So I will share to help speed you up.
This definitely works.
var currImage:int = 1;
var urlVariables:URLVariables = new URLVariables("folder=../images/&currImage=1&file=.png");
var url = urlVariables.folder + urlVariables.currImage + urlVariables.file;
//changes image..
url = urlVariables.folder + 2 + urlVariables.file;
or
url = urlVariables.folder + currImage + urlVariables.file;
You can just remove the second urlVariable ( &currImage=1).
I've just shown how it all works.
From here you can manipulate the number variable to load other images.
I am trying to download a file using data uri in following manner:
<input type="button"
onclick="window.location.href='data:Application/octet-stream;content-disposition:attachment;filename=file.txt,${details}'"
value="Download"/>
The problem is that the downloaded file is always named 'Unknown', whatever I try to use as
filename. Is this the correct way to give the file a name ? or something else needs to be
done ?
Here's the solution, you just have to add a download attribute to anchor tag
a with desired name
<a href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
download="somedata.csv">Example</a>
Another solution is to use JQuery/Javascript
Anchor's Download Property
On Safari, you might want to use this, and instruct the user to ⌘-S the file:
window.open('data:text/csv;base64,' + encodeURI($window.btoa(content)));
Otherwise, this uses Filesaver.js, but works ok:
var downloadFile = function downloadFile(content, filename) {
var supportsDownloadAttribute = 'download' in document.createElement('a');
if(supportsDownloadAttribute) {
var link = angular.element('<a/>');
link.attr({
href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(content)),
target: '_blank',
download: filename
})[0].click();
$timeout(function() {
link.remove();
}, 50);
} else if(typeof safari !== 'undefined') {
window.open('data:attachment/csv;charset=utf-8,' + encodeURI(content));
} else {
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, filename);
}
}
Note: There is some AngularJS in the code above, but it should be easy to factor out...
I had the same issue and finally I solved in all browsers serving the CSV file in the server-side:
const result = json2csv({ data });
res.writeHead(200
'Content-Type': 'application/octet-stream',
'Content-Disposition': 'attachment;filename=issues.csv',
'Content-Length': result.length
});
res.end(result);
For those that are using other libraries like angularjs or backbone, you can try something like this.
$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+$scope.data);
For anybody looking for a client-side solution using Javascript only, here is mine, working on any browser except IE 10 and lower (and Edge...why?!):
var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
var link = document.createElement('a');
link.setAttribute("download", "extract.csv");
link.setAttribute("href", uri);
document.body.appendChild(link);
link.click();
body.removeChild(body.lastChild);