Cocoa WebView and HTML5 Drag and Drop - html

My Fellow Community - I am in some need of assistance here. I am certain this is something simple, but am just missing the mark. So please help.
Scenario:
On Mac OS X 10.7 or greater, I have a webview as a browser. In that webview I navigate to Gmail. In Gmail I compose a message and then drag and drop one or more files into the compose box.
Actual Results:
The pasteboard has NSURL object(s) and the webview simply takes the absolute string value and pastes it into the composed message body. For other edit areas like the search bar and such this behavior is accepted.
Desired Results:
It is desired that the drag triggers the HTML5 when mousing over and the drop will trigger the proper javascript to upload the files. This behavior is consistent with how FireFox, Safari, and OmniWeb perform.
How do I get this same consistent behavior / What do I need to implement?
What I have tried so far:
Using the WebView Editing Delegate I tried replacing the markup in the DOMRange
I subclassed WebView to override performDragging: and modify the DraggingSource pasteboard
Turned on LocalStorage using the WebView preferences private methods
Note: The app will be sandboxed and currently is not code signed.
So what am I missing or better yet where do I start and end?
P.S. I have tried so many things, I didn't want to clutter this question up with the useless code snippets I have tried thus far. However, if solved I will post my results for all others.

Boy I feel silly. The solution was simple, but not obvious.
The answer is it was the user agent string for the webview.
Here is a link of helpful info.
http://www.useragentstring.com/
I recommend you put your useragent string to analyze and make sure it conforms.
Take the following example:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/xxx.x.x (KHTML, like Gecko) MyApp/x.x.x Safari/xxx.x.x
Note: The 'xxx.x.x' is the app kit version (I won't get into details about this).
The fix is the identifier there at the end 'Safari'
Others work to such as Firefox
Happy coding! Really hope this helps someone out.

Related

Can Firefox Inspect Element Network find json strings like Chrome can?

My intention is to analyze json strings as part of REST messages.
In Chrome there are possibilities to use Inspect -> tab Network to find the json string that I want. However I cannot find the json string in Firefox.
Does Firefox support this?
I will show an example from a public page.
Open https://www.theguardian.com/ in Chrome
Inspect (Ctrl-Shift-I) and select tab Network
Click UK (UK News)
On tab Response you will find json strings as for examlple comment-counts.json
like
{"counts":[
{"id":"/p/5kmed","count":269},{"id":"/p/5kkv8","count":39},
{"id":"/p/5kq4t","count":5},{"id":"/p/5k7x7","count":1064},
{"id":"/p/5ky88","count":1720},{"id":"/p/5kp8e","count":841},
{"id":"/p/5kkbv","count":692}]
}"
Image: Inspecting The Guardian UK News
In Firefox I cannot get this piece of code. I have tried Inspect Element tab Network and sub-tabs Headers, Params and Response.
Do anyone know if it is possible in Firefox and in that case how to get it?
Background: I'm working in a corporate linux system where I haven't authority to install so much. However I have access to Firefox 45.5.1 and a bad build of Chrome 43.0.2357.81.
Thanks for any idea you come up with.
AFAIK, Firefox currently offers only a "structured view" of JSON responses in the developer tools.
There is a ticket in Bugzilla requesting plain text view.
Not sure about Firefox 45, but the latest release offers a context menu entry which allows copying response text to clipboard. Maybe that helps.
With Rafael's answer I found out what I needed.
Sometimes Copy Response works fine.
When that does not work I can find what I need from Copy All As HAR, which contains more or less everything before "now".
Since I'm a newbie I can neither flag up Rafaels answer nor flag that this question has been answered.
From my perspective I am fully satisfied and the case can be closed.

Using Google Chrome's console to perform searches

I work at a gym at the front desk. The website we use takes awhile to navigate using the GUI. This console in the Google Chrome browser seems pretty powerful. Can someone please direct me to some sort of tutorial or even answer this question yourself?
How would I use the Google Chrome console (inspect element > console) to perform searches using the website's search ability?
Thanks for your help!
You will need some basic understanding of javascript and DOM to do this.
If your site has a simple form for searching, you could use something like this.
document.getElementById('IdOfSearchField').value = 'test';
document.getElementById('IdOfSearchForm').submit();
What is does is that it fiends the searchfield and sets its value to "test" and then it submits the search form.
On this site (sorry for it being in Swedish, it was the one I was currently working on) you could use the following to search for 'test'.
document.getElementById('query').value = 'test'; document.getElementById('SpeedSearchForm').submit();
If your site has jQuery loaded you could simplify this a bit.
$('#query').val('test'); $('#SpeedSearchForm').submit();
Another way of doing it would be to navigate directly to the searchresult-page with the proper querystring (if that is supported by your website. In my sample case, it would look like this (because the search page is located at /search and just need the querystring query to work).
window.location = '/search?query=test';
But as ajp15243 noted in the comments on the question, it all depends on how your site is built. It's also a bit messy to type all that for every search.

Disabling keys in browser?

I'm getting started on a module for my website, looking for a method that extends flash (for example, something I can do with JavaScript) to disable keyboard commands. For example, I'd like to be able to disable the F1 key, so that it doesn't open up the support tab in Chrome. I looked into access keys, but they don't seem to be a good solution. If anyone has info on how this may be possible, even which language I should be looking into, or even if they have attempted it and simply found it to be impossible, please let me know.
I am not sure if other browsers then Chrome works for you, but have you tried some of these solutions?
[1] How to disable default Help function of browsers
[2] Disable F1-Help key in browser and set your own help file or link or pages etc...
[3] How to Disable Function keys using Javascript?

HTML5 speech input and Google Translate text-to-speech, problem in Chrome

I'm creating a voice/text-memo web application.
Here: http://gustavstromberg.se/sandbox/html5/localstorage/ look at its source (very short, most of it is css)
This is:
Voice recognition, works only in chrome as far as I know.
Local Storage, to store notes as text.
Google Translate text-to-speech.
Everything works, but in different browsers. The voice input works perfect, only in chrome. The text-to-speech works in safari.
To dynamically load the memo into the audio>source element i use:
$("#spokenmemory").html("<source src='http://translate.google.com/translate_tts?tl=en&q="+localStorage['memory']+"' />");
(the localStorage['memory'] contains my stored text memo)
To play my recently saved memo with googles text-to-speech-function I use:
$("#listenplay").click(function(){
$("#spokenmemory")[0].play();
});
(spokenmemory is the id-attribute of my audio-tag)
This does'nt work to play in chrome, but if I visit the translation link (example: http://translate.google.com/translate_tts?tl=en&q=Japan, and my text-memo is "Japan") in a separate browser-tab and then return to my site and reload the page (with the same text-memo "Japan" saved), the playback works. How strange, and annying!
Has anyone any idea of this strange behaviour?
It is because google restricts certain types of requests to prevent the service from being overloaded. So the audio file is not fetched when your browser tries to fetch it. Once you visit the translation link, the audio file is fetched and is cached which is why the playback works (provided the text-memo is same). This has been my observation but I'm not very sure.
When I used CURL to fetch the file, this is what I got in response:
403. That’s an error.Your client does not have permission to get URL /translate_tts?q=hello from this server.
I tried hard Gustav, and this is what I found after a bit of research and testing.
It seems Chrome is having trouble streaming mp3 (the format google returns). The only solution I can imagine is getting the file (cURL?) to your server and then present it to the user. I assume when Google releases the official API, there will also be some sort of a format option.
http://code.google.com/p/chromium/issues/detail?id=45152
http://www.trygve-lie.com/blog/entry/html_5_audio_element_and (yes, the play button is the same color as the background, funky)

IE printing out source code at random (seems very nondeterministic)

Hey. the busted website is: www.mgxvideo.com/mgxcopy-alpha-3, and the specific error that I'm getting is the thing where IE prints out all my source code.
As far as I can tell, the error is appearing at random in IE6, 7, and 8, but it's a commonly occuring error. I'm looking for explanations, debugging tools, fixes. Anything is appreciated, because I'm fully stuck.
Here's how to reproduce:
Add item(s) into cart.
At the display cart (the url shud end with cart_display_ie.php)
Use the shipping calculator over and over and over again until you get the error. It's happened one the first, second, 5th, and the 17th try.
Reset cookies to restart from fresh
Here are some possibly relevant details
1and1 hosting, php from scratch, and mysql
I'm using Mark Sanborn's php code to interface with UPS's servers.
I'm using a local DTD for xhtml transitional 1.0
This error also appears in the checkout cart and also seems associated with the UPS function.
This isn't directly relevant, but IE also plagues me with "The XML page cannot be displayed."
Occassionally, the "The XML page cannot be displayed" is displayed as a small canvas within the context of a source print like the error I'm printing. It'll appear near the location of the error in html source, except the canvas has a really small width and height, and not display any further source code afterwards. I've fixed all these errors; they were all caused by improper syntax or w3 rationing of DTD downloads.
The cart_display*.php is responsible for adding products, removing products, and calculating shipping.
Sometimes it's something stupid like custom settings on my computer b/c I tweak with random settings that cause side effects. But I've tested in msft's VirtualPC, and had friends reproduce the error.
Here are some resources of similar problems. I haven't tried them because--even if they work--they mean that the website doesn't work at typical/default settings.
http://www.techsupportforum.com/microsoft-support/internet-explorer-forum/168285-ie7-problem-printing-html-xml-source-rendering.html
http://www.computing.net/answers/windows-xp/ie6-printing-problem/160128.html
Like I said: any explanations, tools, guesses, or fixes are fully appreciated. I'm trying to finalize the site so I can present it as a beta within the week, and I'm fully stuck. Also, is there a workaround (like a tag) that can hide this error from the user?
I grabbed a network capture of the repro using Fiddler (www.fiddler2.com).
It looks like you're sending an HTML comment containing a webservice result before the HTML body. It further looks like IE is subsequently sniffing this as an XML body instead of a HTML response.
It appears that if you move your HTML comment inside your HTML tag, the problem goes away.
Note that you should confirm changes in a new browser tab. Once IE is on an XML page, simply hitting F5/Refresh isn't necessarily going to show you the HTML content properly due to caching of the MIME-type decision.
To resolve this issue, you need to re-register two dlls.
Open a elevated command prompt and type following commands
regsvr32 /i mshtml.dll
regsvr32 /i shdocvw.dll
For detailed fix steps, visit http://geekzsupport.com/internet-explorer-prints-html-source-code/