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?
Related
I made an simple web page that reference an external page. Are there way to rollback to my web page when the external page to stay idle ?
example my internal page
<button class="button"> <a href = "https://www.searchsite.com"> Answer</button>
example my control page
<script language = "JavaScript">
location.href = "C:../mypage.html";
setTimeout("document.location = 'C:..mypage.html'",1000);
</script>
Instead of sending them to the page, where you have no control, load that page in an iframe. The iframe can be either created when the page loads (if the url is static) and just hidden with css or you can create the iframe with javascript when they click. Then use javascrpit to set the iframe size to the full width and height of the browser window. It will looks like the other site but you still have control.
In the event they resize the browser you may need to have a resize event listener. Also you may wish to modify the browser history so if they hit back they go back to your site.
Then when the timeout limit is reached you can use the setTimeout to just hide or remove the iframe.
Do note that some websites prevent the page from loading in an iframe. So test that first. If they don't allow it things get quite a bit more complicated you would need to use php to grab their pages html, css and javascript, make the changes you need, and then load it in your site.
Based on the url, in your code sample, I must assume you wanting to load some search engines page, many of them have API's you could use to incorporate their search functionality into your site.
I have a page where I modded an app to prepopulate a number of fields. I would like to automatically have the 'submit' button be pressed/submitted when the page loads. I have tried things like:
<script type="text/javascript">
function autoclick() {
document.getElementById('buttonid').click();
}
</script>
with
<body onload="autoclick()">
But it does not work.
Any advice would be greatly appreciated!
Thanks
(It is the iframe on this site: http://abraxas.pw)
I see that your iframe is in the same domain and hence it will possible for you as the cross-domain security may not apply.
Give your iframe an id. And then:
document.getElementById('iframeName').contentWindow.document.getElementById("buttonid").click()
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Make sure that the DOM is fully loaded before you fire your Javascript. Wrap this code into body load or iframe load.
Update:
If the iframe is in the same domain and is in your control, you don't need to do all this. Just fire the click from domloaded of jQuery, or place your code at the end (just before body ends). It will work.
Seeing your code, you have defined the function in the head and are calling it at body load. Place the function and the call at the end of the body.
You cannot do it in iframe for security reasons: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/
Content coming from different domain in iframe can't be controlled in your page using javascript.
Browser treats iframe as a different window so you've no access over it. it's something like trying to access content of different window open in your browser from your own window(which is obviously not possible)
Simple Vimeo iframe click does not work:
$('iframe').click(function(){
alert('ok');
});
I've also tried:
$('body').click(..
$(document).on('click','iframe',..
But when user clicks video while hovering it, nothing works, it just plays the video.
if you include the query parameter api=1 in your embed code, you can access events, including those events triggered when the user clicks the video in the iframe (play,pause). You'll also probably want to include their froogaloop.js file to more easily access these events.
<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225"></iframe>
http://developer.vimeo.com/player/js-api
http://jsfiddle.net/bdougherty/HfwWY/light
https://github.com/vimeo/player-api/tree/master/javascript
It is a third party domian in the iframe, you can not do it because of same origin policy.
Unfortunately, you cannot track clicks in cross-domain iframes due to same origin policy, as epascarello has previously said.
You could set up a "thumbnail" that the user clicks, which would pull up that popup and then subsequently replace the thumbnail with the actual video. Just embed the video you want, but keep it as a hidden div, then use .show() when you want it to start playing.
Source
try this:
$('iframe').contents()
.find('[src*="vimeo.com"]')
.click(
function(){
alert('foo');
}
);
I found that before I could get anything inside the iframe to be found I needed to determine if the iframe was loaded. Then if the iframe gets loaded after page load or reloaded later in the process, your click function works.
jQuery('#iframe').load(function() {
jQuery('#iframe').contents().find('#play-button').click(function () {
// do your stuff
});
}
** this may or may not work cross-domain, but determining if the iframe loaded can be used as a hackish method of determining if something has happened in the iframe. If you created a "play" button on your domain on top of the iframe it could be used to load the iframe via a click function after page load and then your load function could contain your slideshow pause.
I am struggling with this, hope something can shed some light.
On click of a button, I want to open a popup window, and transfer data from parent window to a text field in the popup. And, ensure popup is fully loaded before data is filled.
I tried using document.ReadyState=="complete", but it fires before the popup is fully loaded. I also tried to check the popup.body in a setTimeOut method, but to no avail.
Can you please help ?
PS: Popup window is a form from another domain !.
You won't be able to do this unless you control both domains due to XSS restrictions, but if you do control the content on both domains it's fairly simple with a bit of JS in the page you have opened in a frame.
Using window.opener in the frame will allow you to call any functions defined in the main window, this along with the seconds pages onload event is all you need to trigger a function when it loads.
If the content of the second page is not under your control the best thing you can do is an AJAX request which you will then need to be inserted into your page, this is a little nasty but will work.
I'm trying to make the window.onload event fire sooner so that Google will think my page loads faster (this is a frustrating task since how long it takes to get to window.onload is basically irrelevant from the user perspective, but I digress)
However, I don't know what delays the onload event! Specifically:
If I load a Facebook likebox on my page in an <iframe>, does its loading delay the onload event? What about if the likebox iframe has to load a bunch of profile pics; does onload wait until they fully load?
Suppose that on document ready I do an async AJAX request for an HTML blob and inject it into the page. If this HTML blob contains a bunch of <img> tags, does the onload event wait for all of these to load?
In general, how does the browser know when to fire the onload event? What sorts of things block onload, and what sorts of things don't?
a) You can't control window.onload except by reducing the page "weight". Its up to the browser to decide when its going to declare that event.
b) Google doesn't have a clue about the window.onload event because its not parsing JavaScript.
1) You can completely eliminate the Facebook payload by using XFBML version of the like button and asynchronous loading of the Facebook JavaScript SDK (http://developers.facebook.com/docs/reference/javascript/FB.init/). Do note that it will work only if JavaScript is enabled.
2) Everything that is going to dramatically increase the weight of your web page should be loaded asynchrouniusly, preferably after the window.onload event has fired.
If you look at the waterfall, in firebug or chrome inspector, iframe and ajax calls does affect the onload event. I ran into similar problem with facebook considerably slowing down site. Yes, while looking at pageload time in webmaster tool, it shows the lag.
My solution was to dynamically append facebook iframe when the page is completely loaded. and for ajax calls, i only trigger them on load.
This brought my page load time from 7 seconds with embedded facebook iframe, to 2.6 seconds with dynamically appending it.