I'm trying to use the jQuery .load() function on a <webview/> into a Chrome Packaged App.
This is my test did with an iFrame:
$('<iframe />').attr("src", "http://example.org").load(function(){
$(this).addClass("shown");
}).appendTo('#body');
Fiddle: http://jsfiddle.net/m9ws5/1/
The problem is that when I try to use this code in my packaged app replacing <iframe/> with <webview/> it doesn't fire the load event.
I think the problem is that webview are different from iframe, how can I do?
I've found a solution using the Chrome methods:
onload = function() {
var webview = $("#webview");
webview.on("loadstop", function () {
webview.addClass("shown");
});
}
(always read documentation! https://developer.chrome.com/apps/tags/webview#methods)
Related
I have a file in Google Drive with id=0B3fqdol6s0bWZHV3RWpoV1gyWkk
And I created appscript to download it over a link automatically. The code looks like this
function doGet(e) {
return HtmlService.createHtmlOutput(downloader());
}
function downloader() {
var out = "<body onload='dllink.click()'>";
out +="<a id='dllink' href='https://drive.google.com/uc?export=download&id=0B3fqdol6s0bWZHV3RWpoV1gyWkk'>wait will download automatically<a/>";
out +="</body>";
return out;
};
Then, I developed it as webapps so my friend can download it easily using link
https://script.google.com/macros/s/AKfycbzzToo8gwgdj30FBLrjA1izcfv4rddjW6VClaEGuNXAqZAkIH7S/exec
It's working perfect on PC browser, but sadly, It can't work on mobile phone browser which doesn't support handle onload event or javascript.
So, is there any solution to make an appscript download a file based on its id automatically?
Try it by using an iFrame:
function doGet(e) {
return HtmlService.createHtmlOutput(downloader());
}
function downloader() {
var out = "<iframe width=\"1\" height=\"1\" frameborder=\"0\" src=\"https://drive.google.com/uc?export=download&id=0B3fqdol6s0bWZHV3RWpoV1gyWkk\"></iframe>";
return out;
};
*Backslashes are for escaping
I've seen examples using XAML and writing some code in C# - is it possible just using Javascript?
Yes. Here is a blog showing how to: http://blogs.msdn.com/b/davrous/archive/2012/09/05/tutorial-series-using-winjs-amp-winrt-to-build-a-fun-html5-camera-application.aspx
You can write following method for launch camera
function capturePhoto() {
var capture = new Windows.Media.Capture.CameraCaptureUI();
capture.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo)
.then(function (file) {
if (file) {
return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
}
});
I have a page which autoplays a video. How would I redirect and/or display a webpage when the video is done being watched? Thanks.
Use the ended event:
var videoElement = document.querySelector('video'); // or whatever
videoElement.addEventListener('ended', function (){
window.location = 'http://newpage.com';
});
See it here in action: http://jsfiddle.net/bCBhD/
"onended" is a standard event for html objects which you can use. Documentation here: http://www.w3schools.com/tags/ref_eventattributes.asp
I've been struggling with this for a while and can't figure it out. Hopefully it's something obvious that I missed.
Here's the code:
$(document).ready(function() {
$('#clickbox').load('eventpage/clicks.html.php #click2', function () {
console.log('click2 loaded');
$(this).hide()
.fadeIn(3000);
$('#click2').click(function(e) {
e.preventDefault();
console.log('click2 clicked');
$('#bizdev').load('pagewithscripttags.php', function (data) {
console.log(data);
console.log('#bizdev is loaded, but scripts are not run');
$('#bizdev').hide();
console.log('bizdev hidden');
});
$('#content').hide();
$('#bizdev').show();
});
});
When I run this (from an external js file), the file 'pagewithscripttags.php' is loaded into the DOM on the click event, but the scripts are not executed and I can't figure out why. HELP!
However, when I move the load method into the callback function of the first load, the file is inserted into the DOM and the scripts are run:
$(document).ready(function() {
$('#clickbox').load('eventpage/clicks.html.php #click2', function () {
console.log('click2 loaded');
$(this).hide()
.fadeIn(3000);
$('#bizdev').load('pagewithscripttags.php', function (data) {
console.log(data);
console.log('#bizdev loaded and scripts are run');
$('#bizdev').hide();
console.log('#bizdev hidden');
});
$('#click2').click(function(e) {
e.preventDefault();
console.log('click2 clicked');
$('#content').hide();
$('#bizdev').show();
});
});
Why do the scripts run as part of the callback function, but not on the click event (which is when I need them to run)?
Here are the contents of pagewithscripts.php:
<script>console.log('this script was run');</script>
<script type="IN/MemberProfile" data-id="http://linkedin.com/publicprofileurl" data-format="inline" width='106px' data-related="false"></script>
The first script is run and appears on the console.log, but the second is just inserted into the DOM without being run, except when I place the .load() method outside of the click handler.
(I need to load the scripts on the click event because they take several seconds to run (they call the LinkedIn API) and there's freezing/lag when I run them on document ready.)
You probably need to tell the LinkedIn framework to re-scan the page.
IN.parse(domNode)
This is covered on the JavaScript API reference document on events here:
https://developer.linkedin.com/documents/inauth-inevent-and-inui
Load the script datatype
http://api.jquery.com/jQuery.getScript/
Actually jQuery 'click()' function will not handle the 'click' event of dynamic elements, so try on() or live() functions to make your code working fine, using these functions you can move the click handler code out of the first load() callback.
FYI: Try to replace your $('#click2').click(function(e) { code with this $('#click2').live("click", function(e) { code.
Note: 'live()' function is deprecated from the jQuery version 1.7 onwards.
If you are not clear to use these functions then just provide your full page source so that I can check and adjust your code accordingly.
I need to do a cross-domain request in a chrome extension. I know I can it via message passing but I'd rather stick to just jQuery idioms (so my javascript can also work as a <script src="">).
I do the normal:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data) {
console.log(data);
});
but in the error console I see:
Uncaught ReferenceError: jsonp1271044791817 is not defined
Is jQuery not inserting the callback function correctly into the document? What can I do to make this work?
(If I paste the code into a chrome console, it works fine, but if I put it as the page.js in an extension is when the problem appears.)
Alas, none of these worked, so I ended up doing the communication via the background.html.
background.html
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
function onRequest(request, sender, callback) {
if (request.action == 'getJSON') {
$.getJSON(request.url, callback);
}
}
chrome.extension.onRequest.addListener(onRequest);
</script>
javascripts/page.js
chrome_getJSON = function(url, callback) {
console.log("sending RPC");
chrome.extension.sendRequest({action:'getJSON',url:url}, callback);
}
$(function(){
// use chrome_getJSON instead of $.getJSON
});
If you specify "api.flickr.com" in your manifest.json file you will not need to use the JSONP callback, script injection style of cross domain request.
For example:
"permissions": ["http://api.flickr.com"],
This should work beautifully in you code. I would remove the querystring parameter "&jsoncallback" as there is no JSONP work needed.
The reason why your current code is not working is your code is injecting into pages DOM, content scripts have access to the DOM but no access to javascript context, so there is no method to call on callback.
My impressions it that this fails because the jQuery callback function is being created within the 'isolated world' of the Chrome extension and is inaccessible when the response comes back:
http://code.google.com/chrome/extensions/content_scripts.html#execution-environment
I'm using Prototype and jQuery for various reasons, but my quick fix should be easy to parse:
// Add the callback function to the page
s = new Element('script').update("function boom(e){console.log(e);}");
$$('body')[0].insert(s);
// Tell jQuery which method to call in the response
function shrink_link(oldLink, callback){
jQuery.ajax({
type: "POST",
url: "http://api.awe.sm/url.json",
data: {
v: 3,
url: oldLink,
key: "5c8b1a212434c2153c2f2c2f2c765a36140add243bf6eae876345f8fd11045d9",
tool: "mKU7uN",
channel: "twitter"
},
dataType: "jsonp",
jsonpCallback: callback
});
}
// And make it so.
shrink_link('http://www.google.com', "boom");
Alternatively you can try using the extension XHR capability:
http://code.google.com/chrome/extensions/xhr.html
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// JSON.parse does not evaluate the attacker's scripts.
var resp = JSON.parse(xhr.responseText);
}
}
xhr.send();
The syntax is a little off. There's no need for the callback( bit. This works flawlessly. Tested in the javascript console of Chrome on this StackOverflow page (which includes jQuery):
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data) {
console.log(data);
});
As many of you will know, Google Chrome doesn't support any of the handy GM_ functions at the moment.
As such, it is impossible to do cross site AJAX requests due to various sandbox restrictions (even using great tools like James Padolsey's Cross Domain Request Script)
I needed a way for users to know when my Greasemonkey script had been updated in Chrome (since Chrome doesn't do that either...). I came up with a solution which is documented here (and in use in my Lighthouse++ script) and worth a read for those of you wanting to version check your scripts:
http://blog.bandit.co.nz/post/1048347342/version-check-chrome-greasemonkey-script