I am creating a page to work on low-end devices. Where JS support may not be available or very poor.
So I want to hit an tag on page load for Tracking purpose.
Please help.
please try this one:
window.whenloaded = function(fn) {
if (window.onload) {
var old = window.onload;
window.onload = function() {
old();
fn();
}
} else {
window.onload = fn;
}
}
DEMO
Related
I'd like to dump the HTML contents of a web page, including the HTML of iframes included inside the <iframe> elements. The Chrome Developer Tools "Elements" tab is capable of showing iframe embedded in this way.
When I say "dump the HTML contents" I'm interested in browser automation tools like Selenium or PhantomJS. Do any of these tools have this capacity built in?
For example, the HTML dump I'd like of this page should include the HTML source of this embedded page.
You can use phantomjs to achieve this
Here is a code snippet from the phantom js server code.
var system = require('system');
var url = system.args[1] || '';
if(url.length > 0) {
var page = require('webpage').create();
page.open(url, function (status) {
if (status == 'success') {
var delay, checker = (function() {
var html = page.evaluate(function () {
var body = document.getElementsByTagName('body')[0];
if(body.getAttribute('data-status') == 'ready') {
return document.getElementsByTagName('html')[0].outerHTML;
}
});
if(html) {
clearTimeout(delay);
console.log(html);
phantom.exit();
}
});
delay = setInterval(checker, 100);
}
});
}
on the html you use the "data-status" attribute to let phantomjs know when the page is ready if the html belongs to you . The other option would be to use a nice timeout if the html page does not belong to you.
I'm using a hidden iframe in an HTML page for downloading purposes. And I would like to know when it's done. I've searched the Internet a lot and everyone says that I should use iframe's onload event handler but it's not working for me in Chrome!
I'm not sure where but I read somewhere that it's because I'm downloading files with my iframe instead of HTML documents. And I must admit that it's specific to Chrome and it works fine in FireFox.
I've also tested readstate and onreadystatechange without success.
I've created a fiddle to demonstrate the problem:
function download(url)
{
var iframe = document.createElement("iframe");
iframe.src = url;
iframe.onload = function () {
console.log('Download completed.');
};
document.body.appendChild(iframe);
}
<button onclick="download('http://www.colorado.edu/conflict/peace/download/peace.zip');">Download</button>
function downloadURL(url) {
var hiddenIFrameID = 'hiddenDownloader',
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
iframe.onload = function () {
alert('Download completed.');
};
document.body.appendChild(iframe);
}
iframe.src = url;
}
<button onclick="downloadURL('http://www.colorado.edu/conflict/peace/download/peace.zip');">Download</button>
I changed the entire question because I didn't provide enough info's at the first run: thanks goes to #Sergio.
There are alot of things not working in IE.
When I do addEvent('domReady').... It's even more bad(it doesn't gets executed but if I refresh the page... it works).
Is there a proper way to handle that IE stuff in MooTools?
note:
working on every browser on the whole planet except IE*
edit: added the complete source code of ajax cart.
This code it correct, it's just for understanding purpose only:
ajax_cart.js
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: 'changed_url_but_it's_correct='+(new Date().getTime())
},
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: '/changed_url_but_it's_correct='+(new Date().getTime())
},
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: '/changed_url_but_it's_correct'+(new Date().getTime())
},
initialize: function() {
var cart = this;
this.elem = $(this.options.elem_id);
if (this.elem) {
this.elem.addEvent(this.options.event, function() {
cart.viewCart();
});
}
},
getCart: function() {
var cart = this;
var myHTMLRequest = new Request.HTML({
url: cart.options.url,
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
//console.log(responseHTML);
if (!cart.cartDiv) {
cart.cartDiv = new Element('div', {'class':'ajax-cart'});
cart.cartDiv.fade('hide');
cart.cartDiv.inject(cart.elem);
cart.cartDiv.addEvent('mouseleave',function() {
this.fade('out');
});
}
cart.cartDiv.innerHTML= responseHTML;
cart.cartDiv.fade('in');
},
onFailure: function(xhr) {
console.log(xhr.responseText);
}
}).get();
},
viewCart: function() {
if (this.cartDiv) {
this.cartDiv.fade('in');
} else {
this.getCart();
}
}
});
This code works on every browser except IE, only after refreshing the page, it works.
in index.html
if(Browser.ie) {
var ajaxCart;
window.addEvent('load', function() {
ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
});
} else {
var ajaxCart;
window.addEvent('load', function() {
ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
});
}
In some versions of Internet Explorer (ie. IE6) a script tag might be executed twice if the content-type meta-tag declaration is put after a script tag.
The content-type should always be declared before any script tags.
See here http://mootools.net/docs/core/Utilities/DOMReady
I guess there is no solution so I had to find a workaround for this.
What I did:
Since my problems were solved by refreshing the page, I did this in meta tag.
<meta http-equiv="Expires" content="-1" />
It might help someone else, when it comes up to fixing IE refreshing bugs.
I am developing an app for Windows 8.1. I tried below code it's not working.
<WebView Source="http://wikipedia.org"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"/>
Is there any JavaScript solution to disable touch, mouse & key board scrolling?
I have used below given JS for my requirement. Though I am waiting for a better (XAML) solution.
function RemoveScrolling()
{
var styleElement = document.createElement('style');
var styleText = 'body, html { overflow: hidden; }'
var headElements = document.getElementsByTagName('head');
styleElement.type = 'text/css';
if (headElements.length == 1)
{
headElements[0].appendChild(styleElement);
}
else if (document.head)
{
document.head.appendChild(styleElement);
}
if (styleElement.styleSheet)
{
styleElement.styleSheet.cssText = styleText;
}
}
I'm trying to trigger an event with jQuery mobile that automatically reloads the page when the device's orientation changes. I have media queries written with max-device-width, orientation:landscape, and orientation: portrait. Since the <video> wont scale properly...the only solution I can think of is to refresh the page to the correct media query with the device is rotated.
How do I go about doing this? Thanks.
Thanks guys who answered but I found this and used this and it worked perfectly.
<script type="text/javascript"> // RELOADS WEBPAGE WHEN MOBILE ORIENTATION CHANGES
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0:
case 90:
case -90: window.location.reload();
break; }
};
How about this?
$(window).on('orientationchange', function(e) {
$.mobile.changePage(window.location.href, {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
});
It would be best to namespace that orientationchange event to a specific page.
jQM docs on orientationchange event
using jQuery
$(window).bind('orientationchange', function (event) {
location.reload(true);
});
Please try the following code to redirect the page on orientation event, its work well for me
if (window.DeviceOrientationEvent) {
window.addEventListener('orientationchange', function() { location.reload(); }, false);
}
Thanks
<script type="text/javascript">
window.addEventListener("orientationchange", function() {
console.log(screen.orientation);
}, false);
</script>