Develop Reference

Safari - iPhone - WebApp crashes from unknown reason

I am currently working on a new frontend javascript framework. In past few days I refactored the DOM updater and few another code to look nicer and to get rid of some memory leaks when DOM elements stayed detached in memory.
Unfortunately, Safari on both, iPhone and iPad 2 started crashing now from unknown reason (the rest of browsers I am testing on are fine
windows:
IE10emu/11, edge 14, chrome, opera, FF - latest versions
android:
Webview 4, 38, chrome, opera, ff - latest versions
and there is no problem).
I tried to debug it with remote debugging using the Chrome on Windows and ios_webkit_debug_proxy but unfortunately it does not show anything to me.
I am almost convienced the problem occurs when I am working with the main DOM document or with the shadow DOM document.
What is strange: when I switch logging to console on (there is extensive logging
feature in the framework) just for the DOM updater module and use the remote debug feature, everything seems to be working fine (except its slow of course) and it does not crash anymore so I can't even see when it crashes.
As I have no Mac even the Apple dev license I am looking for help of somebody who owns Mac and have some dev experience. I would like to know if it is possible to somehow debug these kind of unexpected crashes or at least if it is possible to get the reason why it is crashing (some kind of safari log?) - memory leaks, out of memory... whatever what can help me to do some workaround.
The previous version was working fine. Compared to it I am not doing anything special, especially when manipulating the DOM but the code is reordered, placed in more functions / methods and optimized a little bit.
The working (less or more :) version can be found here: http://ajsfw.azurewebsites.net/
The problematic version can be found here: http://ajsdoc.azurewebsites.net/ with logging switched off (i can switch on if necessary)
Sources for the working code can be found here: https://github.com/atomsoftwarestudios/ajsdoc.
I can also provide new, problematic sources if necessary but I don't want to push them to the main until it will get fixed so I can i.e. fork or send it as zipped package. The problem is it is a visual studio solution so bit incompatible with Mac at this time :) But I am pretty sure we can find a way.
The code is quiet complicated already and it will probably require bit of coopeartion by my side to find what is going on.
Hope you can help.
Update (problem resolved):
It was crashing on adding/removing "ontouchmove" event listeners.
I am using multiple HTML documents (document.implementation.createHTML) for templates and the main document (window.document) as a managed render target. When I loaded templates to the "shadow dom" using the innerHTML the ontouch... attribute assigned to the template tag was causing the problem so before I set the template innerHTML I rename it and later during rendering to the main DOM I addEventListener with the original name.
What is strange: before refactoring it didn't matter the event listener was registered in the template "shadow DOM". But I also added some new features so maybe one of them is causing it. Hard to debug, especially when the browser is crashing. Important is it works like charm again even with small complication in the code.
Results can be seen on links provided before, ajsdoc... is with logging so slower (slow as hell with IE10/11), ajsfw if unoptimized (unminimized) release without logging so faster.
Fixed sources commited if sbdy is interrested

So I have finally obtained some crash logs from Safari.
It is crashing on adding "ontouchmove" event listener. Now I have to figure out why it didn't crash in previous version and register it in a different time.

So, just to summarise where the problem was, I am using multiple HTML documents (document.implementation.createHTML) for templates and the main document (window.document) as a managed render target. When I loaded templates to the "shadow Dom" using the innerHTML the ontouch... attribute assigned to the template tag was causing the problem so before I set the template innerHTML I rename it and later during rendering to the main DOM I addEventListener with the original name.
What is strange: before refactoring it didn't matter the event listener was registered in the template "shadow DOM". But I also added some new features so maybe one of them is causing it. Hard to debug, especially when the browser is crashing. Important is it works like charm again even with small complication in the code.

AngularJS $http.get in IE8 is not working

I have to develop an angular application in IE8, but I can't reach the server anyway. When I try a $http.get the application is down. The only strange thing is that when I press F12 in the browser (Developer tools) and refresh the web it works perfectly. Does anybody get any answer, please?.

I don't know what version of Angular you're using but as it's said in the doc :
Note: AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
If not can you show us your code. It's a bit hard to help you without any information.

The problem was the console.log and $log.debug annotations. When I drop them from the code it works perfectly. I suppose IE8 can't read them without the Developer Tools active and it stops working.
Thank you for your answers.

Create Internet Explorer extension changing content of a webpage

I'd like to develop an Internet Explorer extension that changes the content of a specific webpage, like content scripts in Google Chrome. (eg. when I go to the website Google and I search for "car" I'd like to have a div created on the page with the word "car" inside).
I've been looking on SO but haven't found clear evidences if this kind of thing is possible.
What I'm specifically looking for is a clear tutorial or some example of how to do this.
Bruno,

That is exactly what GreaseMonkey for IE is made for http://www.gm4ie.com/

I have answered a similar question, but the answer is in C#. It describes how to create a fully working project to accomplish exactly what you asked: changing page contents!
How to get started with developing Internet Explorer extensions?
It covers other topics too:
running javascripts from the addin
how to register IE addins
saving data (addin configurations)

You can read more about Internet Explorer Extension from MSDN:
http://msdn.microsoft.com/en-us/library/aa753587(v=vs.85).aspx
Extensions in IE are not created using web technologies, they are created using C++/.NET. Such as ActiveX

Similar to "GreaseMonkey for IE" is Trixie:
Trixie is to Internet Explorer as Greasemonkey is to Firefox. It lets you remix the Web via scripts. You may do this to either make it more readable, fix bugs or to even add little features to make the site more usable to you. Trixie by itself does none of this. It is just a plugin for Internet Explorer that enables executing chunks of JavaScript code and thus lets you use the Web the way you want to use it.

This is one of the best I found. http://www.enhanceie.com/ie/dev.asp It has give sample scripts as well. Which will help you.
Another one is open source and stable version : firebreath
same kind question is also asked How to get started with developing Internet Explorer extensions?

This is a working example of manipulating the DOM from microsoft. This is a BHO development with MS Visual Studio. Check it out: http://msdn.microsoft.com/en-us/library/bb250489%28v=vs.85%29.aspx

Firefox XUL toolbar with javascript to IE?

I have developed a Firefox toolbar in XUL, which uses javascript to manipulate the DOM.
I'd like to export this to IE.
I know that IE doesn't support XUL, but wonder:
(1) is there an easy way to use the existing javascript code for the IE toolbar as well?
(2) is there a IE installer that easily creates all necessary registry values for creating a toolbar?
I'd be grateful for any help. If anyone can point me to a sample IE toolbar code, with several buttons, drop-down menus and perhaps even a search box, that'll make things much easier as well.
Thanks!

Try AmpleSDK by using this you may port your toolbar to ie

Writing an IE toolbar requires C++, the Windows API and Microsoft COM. If you have the paid version of Visual Studio then you can also use ATL to simplify some of the work.
You won't be able to re-use your JavaScript code. Unless perhaps JavaScript code for manipulating the DOM of the currently loaded webpage.
This article is what got me started:
http://msdn.microsoft.com/en-us/library/bb776819.aspx
I found this to be a helpful sample.
I want to warn you though that creating an IE toolbar can be quite painful. If you are serious then I recommend that you learn and understand the basics of COM and ActiveX first. (I did not do this and spent many hours messing around getting nowhere.)
An alternative option would to embed XULRunner in IE. It would allow you to port most of your code. I have never tried this myself though.

Well the company www.softomate.com is focused on porting existing FF plugins to IE and other browsers. We were able to port my existing Security related plugin to IE and Safari with them.

Risk of using contentEditable in IE

We have to add a basic HTML editor to our product. As we only support IE at present (most customers are still on IE 6), I have been told to use the Internet Explorer built-in XHTML editing capabilities – e.g. <div contentEditable="true"> as explained at "Editing a Web Page" .
Apart from not working in other browsers. (The management does not consider it being a problem. Our customers will put up with our software only working with IE. We have never lost any money by our software only working in IE; most customers will only let their staff use IE6 at present anyway)
What other problem are we likely to get with contentEditable?
Update
The HTML editor I wrote with “contentEditable” proved to very hard to get reliable, with many problems. If I had to do this again, I would push very hard to one of the many open source solutions (e.g. TinyMCE) or buy in a supported HTML editor.
No doubt that a very skilled jscript programmer can get “contentEditable” to work well given enough time. It just that all the examples on the web looks so simple, until you test common operations like doing a cut/paste from word and trying to edit the resulting HTML. (just the sort of things a customer will do)
(Just search for “contentEditable” on stackoverflow to get some ideal of the problems other people have had)

The contentEditable property works in Safari, Firefox 3, and Opera 9.
Since manipulation will undoubtably be through selections, your biggest problem will be getting the selection/ranges working across browsers (see here).
There are also numerous little bugs across browsers which may or may not bite you. These include incompatible case-sensitivity, incompatible methods of turning it off again (removeAttribute vs. setting to false).
Despite these flaws, I find it works rather well.

How about using some open-source solution that works in all major browsers?
TinyMCE
There are other projects as well, but that's what I'd use.

HTML 5 include the contenteditable attribute, so it looks like it will be in IE for a long time to come.
Just got a email from someone on the IE team
While it's basically impossible to
comment on the future with a high
degree of confidence, it's fair to say
that I'm not aware of any plans to
remove contentEditable, and if it were
removed, it would break a LOT of
sites.

A quick google search produced a blog post on some (albeit minor) issues of contentEditable.

contentEditable works under Firefox 3.
I don't know of any problems with contentEditable.

I would just be sure to check what content you get back as inserting XSS attacks are quite easy in IE if there is no validation of the HTML content added.