Alright StackOverflow, I've got a weird one today. I am working on adding pasting of images to a website. It works for Firefox and Chrome but fails for IE. When I turn on the debugger it gives an error on:
var items = event.clipboardData.items;
saying that event.clipboardData.items is undefined. What is the way to do this in IE?
Here is the code which actually comes from the WebKit layout tests:
<!DOCTYPE html>
<html>
<head>
<script>
function paste(event){
var items = event.clipboardData.items;
console.log(items.length);
for (var i = 0; i < items.length; ++i) {
if (items[i].kind == 'file' && items[i].type == 'image/png') {
var blob = items[i].getAsFile();
var url = window.URL.createObjectURL(blob);
document.getElementById('dest').src = url;
}
}
}
window.onload = function (e) {
document.body.onpaste = paste;
}
</script>
</head>
<body contenteditable="true">
<img id="dest">
</body>
</html>
The specific workflow I'm trying to allow is for a user to use the Snipping Tool to take a snapshot and to then paste that image into IE. Normally I would tell the user to use Chrome or Firefox but this is for work and we are restricted to IE. Thanks for the help!
My testing Environment:
Windows 8 64bit
IE 10
This is a really old issue, but copying an image from snipping tool to IE10 is simply not possible. The functionality is added in Edge. IE10 does not have the tools to paste images from clipboard.
Related
If I were to write an application that controls another application which I don't have the binaries to,
For example, an application that by itself would open Google Earth and place the camera in a specific point my application would tell it, say -24,131, and then command google earth to save the image to a specific folder.
What is the approach to this?
How can I know the functions that are being executed and fire them on behalf of a control program like that?
Also, I will also need to know that downloading of images was finished so I can grab the image.
I saw there is an API for google earth, but I don't know if I can use it to control google-earth (the application itself)
You can use the Google Earth API (developers.google.com/earth/) to control a Google Earth globe instance.
See Javascript code snapshot here:
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
var lookAt = ge.createLookAt('');
lookAt.setLatitude(41.26);
lookAt.setLongitude(-100.00);
lookAt.setRange(800000.0);
ge.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
google.setOnLoadCallback(init);
See HTML code here:
<!DOCTYPE html>
<head>
<script src="http://www.google.com/jsapi"></script>
</head>
<style>
body {
margin:20px;
height:100%;
width:98%;
}
#map3d {
width:75%;
float:right;
}
</style>
<body>
<div id="map3d"></div>
</body>
</html>
The you can use wkhtml2pdf (code.google.com/p/wkhtmltopdf/) function wkhtmltoimage, or PhantomJs (github.com/ariya/phantomjs/wiki/Screen-Capture) to get an image version.
Hope it helps!
Cheers,
Mihai
I'm attempting to load the excanvas polyfill in the page-specific js file for my page. This script file is inserted after the body tag on my page.
The odd bit is that if I use
<script type='text/javascript' src='/Scripts/polyfills/excanvas.compiled.js'></script>
in my head tag, everything works great, but I don't necessarily want to load this script for HTML5 compliant browsers if I don't have to.
So naturally I tried to use Modernizr to load it selectively. This is my perfectly executing, but non-functioning javascript code:
<!-- language: lang-js -->
$(function () {
Modernizr.load({
test: Modernizr.canvas,
nope: '/Scripts/polyfills/excanvas.compiled.js',
complete: function () {
setImage();
}
});
});
This seems to work fine. The excanvas script appears to load successfully.
The setImage function creates the canvas element dynamically and adds it to a div on the page.
This works fine in IE9 but fails to render in IE8.
<!-- language: lang-js -->
function setImage() {
var canvasHello = document.createElement('canvas');
canvasHello.id = 'canvasHello';
$('#divContent').append(canvasHello);
if (!Modernizr.canvas) {
G_vmlCanvasManager.initElement(canvasHello);
}
var canvasContext = canvasHello.getContext('2d');
canvasContext.width = 800;
canvasContext.height = 600;
canvasContext.fillStyle = "#000000";
canvasContext.fillRect(0, 0, 600, 800);
var img = document.createElement('img');
img.src = '/Content/images/hello.png';
img.onload = function () {
canvasContext.drawImage(img, 100, 25, 100, 100);
}
}
Did I miss something or does the excanvas script not function outside of the head tag?
in the given requirement you could use the IE conditional statements like this...
<!--[if lt IE 9]>
<script src="script/excanvas.js"></script>
<![endif]-->
would suffice....
the statement will only be understood by IE version less than 9 and the script tag gets attached.
The only thing you missed is the instructions on how to use excanvas:
The excanvas.js file must be included in the page before any occurrences of canvas elements in the markup. This is due to limitations in IE and we need to do our magic before IE sees any instance of in the markup. It is recommended to put it in the head.
I've heard that Opera Mobile is supporting AJAX.
So I've tied to wrote a simple page that uses ...
Can anyone tell me what is wrong with this page?
<html>
<head>
<script language="javascript">
<!--
var fname = "nav_test.html";
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function mkDoc()
{
if (xmlhttp.readyState == 4)
{
document.open();
document.writeln(fname);
document.writeln(xmlhttp.responseText);
document.close();
}
}
xmlhttp.onreadystatechange= mkDoc;
xmlhttp.open("GET", fname, true);
xmlhttp.send(null);
-->
</script>
</head>
<body />
</html>
In nav_test.html, which is in the same directory as the file shown above, there is only one line:
<p>test</p>
After loading it with Opera Mobile 11 it displays only
"nav_test.html".
I've checked and this page works with Nokia N900 default browser. But it doesn't with Midori browser. I have also tested it with Firefox browser on my PC and it works there as well.
I wish to be able to run this page under Opera since Opera ca be installed on most of modern mobile phones.
Of course it supports AJAX. Just run any AJAX framework's showcase on it (such as Ext's showcase).
As for your code, at best download any working example and modify it, if you start learning JavaScript. Don't also write your own AJAX invocation support for various browsers, there's no need for it, because it was already written a thousend times. At best use prototype or jQuery - you can find tons of examples.
I'm working on my first GM script, to replace the Flash previews on http://www.freesound.org with HTML 5 audio tags, and to add a download link to search results. I have the latter working fine, but I can't get the audio tag to display in Firefox 3.5.9. Here's my script:
// ==UserScript==
// #name FreeSound HTML 5 Preview
// #namespace http://thewordnerd.info
// #description Replace Flash-based sound previews on freesound.org with audio tags and add quick download links
// #include http://freesound.org/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// ==/UserScript==
$(document).ready(function() {
$("embed").remove();
$(".samplelist").each(function(index) {
sampleNo = $(this).find("a:first").attr("href").split("?")[1].split("=")[1];
userName = $(this).find("a:eq(1)").html();
title = $(this).find("a:first").html().replace(/ /g, "_");
url = "/download/"+sampleNo+"/"+sampleNo+"_"+userName+"_"+title;
$(this).find("script").replaceWith("<audio src='"+url+"' controls='controls' type='audio/wave'/>");
//$(this).find("audio").removeAttr("tabindex");
$(this).append("<a href='"+url+"'>Download</a>");
});
});
I can see the element in Firebug and it seems just fine.
Thoughts on what I might be doing wrong here? Since the download link does download the requested file, since it's a wave and since I think I've set the correct type, I'm at a loss as to why this isn't displaying.
It may not be your script so much as the freesound.org site/server.
When I run a modified version of your script, the audio controls all appear for a split second before reverting to the error display, like so:
Firefox reports MEDIA_ERR_SRC_NOT_SUPPORTED for the files I checked.
Save this code to your machine and then run it with Firefox:
<html>
<head>
<title>Audio File test</title>
</head>
<body>
<audio id="aud1" controls="true" type="audio/ogg"
src="http://www.freesound.org/download/7521/7521_abinadimeza_Rainfall.ogg">xxx</audio>
<audio id="aud2" controls="true" type="audio/ogg"
src="http://developer.mozilla.org/#api/deki/files/2926/=AudioTest_(1).ogg">xxx</audio>
</body>
<script type="text/javascript">
window.addEventListener ("load", ErrorReport, false);
function ErrorReport (evt)
{
console.log (document.getElementById ("aud1").error);
console.log (document.getElementById ("aud2").error);
}
</script>
</html>
.
You'll see that the known good file, from Mozilla, works correctly but the one from freesound.org does not. This may be a bug/limitation in Firefox -- both files play fine on my local player.
Here is a link to the Firefox bug system, to search for or report bugs.
I have protocol (like http) with scheme managed with 3rd party App registered in Mac OS X.
I.e, x-someapp://someaction or something like that.
How can I open this URL with Google Chrome?
By default, Chrome starts searching in Google engine instead launching App and passing URL handling to it...
Safari launches some registered App. And it is right thing.
Firefox and Opera asks what to do... and I can launch App also.
But Chrome... Doesn't ask.
I even tried to write some HTML page with JavaScript inside to send XHttpRequest:
function _httpExecuteCallback()
{
if (httpRequestCallbackFunction != null) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
httpRequestCallbackFunction();
httpRequestCallbackFunction = null;
}
}
}
}
function _httpGet(url, callbackFunction)
{
httpRequest = false;
httpRequestCallbackFunction = callbackFunction;
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = _httpExecuteCallback;
httpRequest.open('GET', url, true);
httpRequest.send(null);
}
_httpGet('x-someapp://test',function(){})
No results also...
The current accepted solution has a problem with Chrome for SSL https. Watching the console log, Chrome blocks the request because it thinks the custom url protocol is not secure:
[blocked] The page at reports blah blah ran insecure content from customproto//blah blah
Here is a solution (this took me a few days to research):
<input type='button' value='Test Custom Url' onclick='exec()'>
<script>
function submitRequest(buttonId) {
var d = (window.parent)?window.parent.document:window.document
if (d.getElementById(buttonId) == null || d.getElementById(buttonId) == undefined) return;
if (d.getElementById(buttonId).dispatchEvent) {
var e = d.createEvent("MouseEvents");
e.initEvent("click", true, true);
d.getElementById(buttonId).dispatchEvent(e);
}
else {
d.getElementById(buttonId).click();
}
}
function exec(){
var d = (window.parent)?window.parent.document:window.document
var f = d.getElementById('customUrlLink')
if (f ) {f.parentNode.removeChild(f);}
var a = d.createElement('a');
a.href = 'mycustomproto://arg1';
a.innerHTML = "Link"
a.setAttribute('id', 'customUrlLink');
a.setAttribute("style", "display:none; ");
d.body.appendChild(a);
submitRequest("customUrlLink");
}
</script>
This code will not work for IE. I've found using this technique IE limits the argument of the custom protocol to less than 1000 where as using the iFrame technique IE will allow 2083 chars.
The only way to overcome the url limit in javascript is chuck the data and call multiple times. If anyone wants to take a stab at that, please let me know how it goes. I would like to use it.
To handle long urls in the executing app, pass a token into the app and have it go get the data from a url GET.
So for right now I am using one function for Chrome/FF and another function for IE.
These links helped me develop this solution:
https://superuser.com/questions/655405/custom-protocol-handler-not-working-in-chrome-on-ssl-page
Simulating a click in jQuery/JavaScript on a link
(wish I had known this a few days ago....hope this helps someone)
==================================================
Update: (8hr later)
==================================================
Jake posted a great solution for chrome: https://superuser.com/questions/655405/custom-protocol-handler-not-working-in-chrome-on-ssl-page
This works in chrome only:
window.location.assign("customprotocol://");
It will fail in an iframe so this is working:
var w = (window.parent)?window.parent:window
w.location.assign(service + '://' + data)
==================================================
Update: (weeks later)
==================================================
All of the examples of opening the custom protocol, including my own, have a "://" in the url. And this is what is causing the SSL warnings.
Turns out the solution is to change "://" to ":"
so do this:
src="x-myproto:query" .....
and the SSL warnings will go away.
==================================================
Follow: (after months of production use)
==================================================
This has been working well for chorme. Detect the browser and if chrome do this:
var w = (window.parent)?window.parent:window
w.location.assign('myproto://xyzabcdefetc')
For IE and other browsers I do something slightly different.
Note that browsers do impose a limit on how much data you can put in custom url protocol. As long as your string is under 800 chars this seems to be the magic number for which works in all browsers.
It looks like it's Google's locationbar parsing which is getting in the way.
The browser, however, does seem to handle custom URL schemes properly. Try this in your locationbar:
javascript:document.location = 'myscheme://whatever'
Any link on your page that uses the custom scheme should also do the right thing.
I found the solution that works with Chrome.
I use the IFRAME-way.
Example (with JQuery):
$("body").append('<span id="__protoProxy"></span>');
function queryWord(aWord)
{
var protoProxy = document.getElementById('__protoProxy');
if (protoProxy)
{
var word = aWord.replace('"','\"');
protoProxy.innerHTML = '<div style="display:none;"><iframe src="x-myproto://query?' + word + '"></iframe></div>';
}
}
queryWord('hello');
Here's a solution that also includes a redirect to the App Store / Play Store if the user doesn't have the app. It uses a setTimeout for this. It also makes use of an iframe to support more browsers. So this works on Chrome, and any other mobile browser. We use this as my company, Branch. Just modify the two links below to correspond to your URI and App Store link.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://somepath";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/myapp/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>
Again, this should work on any browser, thanks to the iframe.
If Chrome does not recognize the URL scheme, it defaults to a search.
This is what I see in Safari:
alt text http://img62.imageshack.us/img62/6792/clipboard02oh.jpg
and in Firefox:
alt text http://img138.imageshack.us/img138/9986/clipboard04xk.jpg
I believe the reason why Chrome defaults to search is that there are special google searches that use the colon.
E.g:
define: dictionary
filetype:pdf google chromium
This is one of the annoyances I have with Firefox, I have to jump to the "search box" rather than the address bar to execute these types of searches. Since Chrome does not have a separate search box like Firefox, IE and Safari have, this functionality is required.
Ajax requests won't get you around this.
Some weeks later ....
Looks like window.location.replace('myscheme://whatever') has full cross-browser support , works with chrome,firefox,safari,edge,opera see https://developer.mozilla.org/en-US/docs/Web/API/Location/replace