Mobile device DOM block - javascript

I have created simple header bars. Each of them will send a request when clicked, but on the mobile device (doesn't matter which one but even desktop Google Chrome mobile mod on the console) DOM begin to get blocked and stops working at all.
I suspect that:
when user clicked button I send very long get request
I bind new listeners (again and again) but not this header bar
How can I prevent this?

How did you attach your click events ? It should not be complicated.
Here is a simple code sample that should work (also on mobile browsers):
HTML snippet:
<button id="myBtn">Click here to load content</button>
<div id="contentContainer"></div>
Javascript (using jQuery) snippet:
$('#myBtn').on('click',function(){
// show some indication to the user that you are loading something
$('#contentContainer').html('<strong>Loading content, please wait..</strong>');
// do your ajax call
$.ajax({
url:'https://api.myapp.com/get/user-info',
}).done(
function(data){
// all done - display the loaded content
$('#contentContainer').html(data);
});
});
Use this as a use-case, if you are still getting "blocked" after executing javascript on a mobile device (clicking an element that is attached to a click handler is also executing js), it usually means that you have a javascript error - which causes the mobile browser to stop from running any more javascript until you fix the problem and reload the page.
Hope it helps a bit!

Related

Disable webpage if opened on a mobile device. (Android / iPad / Blackberry)

I have web app with several pages, eventually it will be 100% mobile ready, but it's not right now.
When someone accesses it from a mobile device, I have a dialog which pops up to tell them it's not mobile ready yet.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
//alert(navigator.userAgent);
.dialog();
}
There is a lot of JS and HTML which executes when the page loads, I can stop the JS with an if statement, but the HTML still loads. The problem is all the HTML is broken and out of place behind the dialog. I'd rather not fill the entire screen with the dialog or just hide everything behind a big div. I would like to stop everything on the page except for the dialog.
Is there anyway to stop the HTML executing and is there a better way to stop the JS executing than with an if statement?
You cannot prevent loading of HTML or JS code to browser on client side, only on the server.
One option is to put all excess html and js in a separate file and load it through AJAX only if the mobile test failed.
For instance you can use jQuery.load() http://api.jquery.com/load/ Load data from the server and place the returned HTML into the matched element.

List of all webrequests in chrome extension

Im playing around with making my first chrome extension. Im making a small extension that monitors the webrequests a page makes. This means that im listening to the: chrome.webRequest.onBeforeRequest.addListener event
I am a little confused on how to execute this code on every page i load. It works on any page if i open the extension web page and run the code in this context. However i would like it to run regardless of having the page open. How do i go around doing this?
I looked at content_scripts, but havent figured out if they are the proper path to take - and ven if they are how do i send a message from my content script to my web page notifying it to run the code. As far as i understand this the content script is first run after the page has been loaded and therefore it does not matter if i call my page and add the listeners, because the show is already over - is this correct?
The wa i understand this is that i cannot add listeners in the content script - hence the need to make this messaging thing - is this correct?
Thank you.
You would put the onBeforeRequest listener in a background page, specifically the persistent variant of it. When the event is invoked, whatever you have in the handler will be run.

How to trigger click-to-call with javascript (iphone)

I have a link in a mobile webpage that needs to track an advertiser clickTag and then activate click-to-call.
I've got the tracking working but I don't know how to trigger the tel:1800123456; with javascript. Any ideas? This is not a web app; it's a standard html page. I can use jQuery.
Update
Just calling window.open("tel:num"); after adding a tracking iframe on click was not reliable enough because sometimes the call dialog box would open before the iframe had finished loading.
window.open("tel:num"); also opens a new window then opens the call dialog box, which isn't a great user experience on iphone 3gs/4.
Do you have any control over the tracking iframe? If so, you could call a function which makes the window.location call once it's loaded. Something like
$(document).ready(function() { window.iframe_loaded(); });
in the iframe code (if it has jQuery), and a function in your main script called iframe_loaded which does the window.location call.
If you can't set the code within the iframe but can edit the iframe container code, then you could do this...
<iframe id="whatever" onload="iframe_loaded();" width="400" height="200"></iframe>
...so the onload calls iframe_loaded() which does window.location...
If you don't have control over the iframe or its content, then easy kludge would be to just wrap the window.location call in a timeout, i.e.
setTimeout('window.location="tel:18001234567";', 500);
The 500 at the end will delay it by half a second. (Increase it if your iframe is slow to load.) It's not as elegant, but might work fine and users probably won't notice a small delay!
Have you tried window.open(url); where the url is "tel:18001234567" ?
Seems like that should work, right?

jQuery / JavaScript - Loading iframe with Ajax slows down page

I'm loading a iframe with $.ajax():
$("#iframe_wrapper").each(function(){
$.ajax({
type: "post",
url: "http://site.com",
data: { action: 'get_the_iframe' },
context: this,
success: function(html){
$(this).html(html);
$(this).show();
$('#theiframe').load(function(){
// do stuff with the iframe...
});
}
});
});
the iframe is inside a function that gets called if $_POST['action'] is 'get_the_iframe':
<iframe id="theiframe" name="theiframe" src="http://site.com/page/"></iframe>
it works, but the problem is that the browser seems to display the entire page really slow, it seems like it waits for the iframe to load before displaying the entire content on the page, which is not supposed to happen because it's done trough ajax. This is exactly what I was trying to avoid...
Any ideas what's wrong here?
I think the key to the answer is where, or more specifically, when your jQuery fragment that performs the ajax post is being run by the browser.
I suspect the jQuery code to load the page happens sometime before the full page has loaded. And maybe your browser doesn't support asynchronous loads from the same domain.. This was the case with IE for a long time. So what's going on is the browser starts loading and processing the iframe somewhat in-step with the rest of the requests that your normal (outer) page is doing.
If this is not the case yet try putting the code that starts the ajax post in a document ready handler.
Also, check in other browsers to see if the problem occurs across the board.
The reason why you are seeing this is because IFrame is blocking element, especially in IE. IFrames are the most costly element to create in a browser, and it also will block execution of JavaScript when it's being created. There's also resource blocking rule regarding IFrame as well. If you have CSS files in your page, IFrame will not load until response for each and every CSS file is received by the browser (IE) or in Firefox, all IFrame's resources will be blocked until response is received for all resources on the main page.
Just as an example, I had a standard spinner control, that would display running snake whenever I do AJAX call to the server (to give user some feedback that something is happening). I also was create IFrame element at the body level, to overlay all dropdown elements on the page for IE6/7 bleed through bug. At some point I noticed that my web-service calls where about twice slower in IE then they were in FF. After some investigation, I realized that creation of the IFrame element is blocking everything in the browser, including code that receives response from the server.
I don't think there's a way around it, except for not using IFrames...

Notifying iFrame page from Firefox extension?

I'm writing a Firefox extension and need to notify an iFrame page of certain events. The iFrame page is contained within a sidebar created by the extension, and this iFrame page is controlled by me.
When I load the iFrame page, the extension code needs to send a notification and trigger something to happen within the iFrame page.
To accomplish this, I'm creating an event from the extension Javascript and firing the event, which the iFrame page is listening to.
Unfortunately, when invoking document.createEvent(), this error pops up (copied, with the quotes, straight out of Firebug):
Operation is not supported" code: "9
Any clues on the error, or suggestions on how to trigger something in an iFrame page from the extension Javascript?
Firebug helps debug web pages. From your description it appears that the problem happens in your extension, so set up the profile according to the documentation and look in the Error Console.
Other than that, remote debugging requires seeing more of your code :)
That error is NS_ERROR_DOM_NOT_SUPPORTED_ERR. Are you using the right document (the content one, not the XUL window)? Although, I'm not convinced that that would error out either (in fact, I think it should work).
This is an example of code that works for me:
var eventName = "my-event";
var event = document.createEvent('Events');
event.initEvent(eventName, true, true);
document.getElementById('my_event_listener').dispatchEvent(event)

Categories