The following code loads a youtube vidéo in a player.
If I remove the two "alert", it doesn't work anymore...
ytplayer = document.getElementById("ytPlayer");
alert('ok');
if (ytplayer) {
alert('ok');
loadVideo(url, start);
}
Can someone help me?
you are probably invoking the code before the page loads. With the alert, js execution stops, allowing the page to load. If this is correct, you need to look into the window.onload callback or possibly document.ready
window.onload = function(){
// load the vid here
}
Invoke the function after the page has been loaded completely.
window.onload = function() {
loadVideo(url, start);
}
I fixed the problem with the following :
ytplayer = document.getElementById("ytPlayer");
if (ytplayer) {
setTimeout( function() { loadVideo(url, start); }, 1000);
}
Thanks for your answers.
Did you use Ajax Request ?
if YES then
put you code that didnt work at the end of
AjaxObject.onreadystatechange = function () {
if (AjaxObject.readyState == 4) {
.
.
.
.
.
// PUT HERE
}
}
then IF NO
put your code in function and return false or true
like this
ytplayer = document.getElementById("ytPlayer");
alert('ok');
if (ytplayer) {
//alert('ok');
loadVideo(url, start);
return true;
}
hope helps
Related
I had come up with these solution:
My Solution / Expectation:Put a setTimeout(). So if the page will still not load, in 5sec, I will reload(auto) the page.
See code:
var time;
window.onload = function(){
time = setTimeout(function(){ document.location.reload(); }, 5000);
};
$(document).ready(function(){
clearTimeout(time);
});
My Problem with this solution, is that the page will still reload even if the page has already loaded.
I want to cancel the setTimeout if the page has already loaded, but the code above does not working as expected.
Someone could help me, I really needing this to my thesis. Please help. Thanks in adv.
This will help..as the document itself have readyState variable
var time;
window.onload = function() {
time = setTimeout(function() {
if (document.readyState === 'complete') {
clearTimeout(time);
} else {
document.location.reload();
}
}, 5000);
};
Instead of the jQuery, use document.readyState like so:
var time;
window.onload = function(){
time = setTimeout(function(){
document.location.reload();
}, 5000);
};
document.onreadystatechange = function() {
if (document.readyState == "complete") {
clearTimeout(time);
}
}
Hi I have written some javascript code to generate an iFrame and insert content inside. But I don't want to use setTimeout and I want to refactor the code. I tried to use document.ready() and window.onLoad() and they don't work.
This is my code:
onShow: function() {
//TODO: why 200 ms wait? why not wait for specific event
setTimeout(this.injectHtml.bind(this), 200);
},
injectHtml: function() {
var iframe = this.el;
if (iframe.contentWindow === null) { //Check for contentWindow for null.
$(iframe).html(this.params.html);
} else { //If contentWindow is present then open the document for writing.
iframe = iframe.contentWindow;
iframe.document.open('text/html');
iframe.document.write(this.params.html);
iframe.document.close();
$(this.el).on('load', function() {
var iframe = $(this).contents();
iframe.find("#langSelect").off("change");
iframe.find("#langSelect").on("change", function() { //If another language is selected from Dropdown.
abc.languages.setSelected($(this).val());
abc.elements.setLanguage();
Vent.trigger(Vent.Event.LANGUAGE_SELECTED, $(this).val());
});
});
}
}
I'm really confused here. Can anyone shed light?
I have tried this as well:
Case#1:
var _this=this;
$(document).ready(function(){
_this.injectHtml.bind(_this); //Does not work. Everything loads, I get empty page
});
Case#2:
window.onLoad = function(){
this.injectHtml.bind(this);
};
can anyone help?
I'm trying to implement a simple image slider on my website but it doesn't seem to want to work. Nothing happens at all. Nothing I can think of has worked thus far so I thought I'd ask here. This is my code.
window.onload = function(){
image = document.getElementById("slideShow");
index = 0;
setInterval(slide, 3000);
};
function slide(){
index++;
if(index >= 6) {index = 0;}
path = "images/Slideshow/image"+index+".jpeg";
image.setAttribute("src",path);
}
window.onload is pretty cheesy because nobody seems to agree on what onload actually means.
i would recommend you use
document.addEventListener("DOMContentLoaded", function(){
// code
});
Another thing u should be aware of is slow loading. If the scripts gets loaded after the ready event has been fired then your code will never trigger.
A solution is wrapping the ready function is a seperate module.
var eventReady;
(function(){
var funcArr = [];
eventReady = function(func){
funcArr.push(func);
}
document.addEventListener("DOMContentLoaded", function(){
for(var i=0;i<funcArr.length;i++){
try{
funcArr[i]();
}
catch(e){
throw(e);
}
finally{
continue;
}
};
eventReady = function(func){
func();
}
});
})();
and then use the module like:
eventReady(function(){
// code
})
I am using native.history.js to put a customised URL in the back button.
The script works fine. Now the issue is I want to make a page redirect when the refresh button is clicked; so i modified the script like this:
<script>
var back = 0;
$(window).bind('beforeunload', function () {
if (confirm('Want to continue?')) {
if (back == 1) {
alert('back');
//window.location.href = "<?=$$last_offer?>";
} else {
alert('refresh');
//window.location.href = "<?=$actual_link;?>";
}
} else {
// Do nothing!
}
});
window.onpageshow = function (e) {
if (e.persisted) {
location.reload();
}
};
window.onpopstate = function (event) {
if (document.location.toString().indexOf("redir=1") > 0) {
back = 1;
window.location.href = "<?=$$last_offer?>";
}
};
</script>
Issue is, the beforeunload function seems not working.
What is the problem I can't fin?.
If I am clicking the back button, the page is taking to the desired page, so it works fine.
All I want is that, somehow the page refresh must work as I anticipated.
Try use
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});
Instead of bind, use on, i dont know what jquery version you use, but i will suggest "on".
Works fine here:
link
on jquery version 2.x(edge)
Jquery provides a very convenient way to delay executing code until the DOM is fully loaded:
$(function() {
dom_is_loaded();
});
The Facebook Javascript SDK, when loaded asynchronously, provides a similar mechanism:
window.fbAsyncInit = function() {
fb_is_loaded();
}
What's the most elegant way to delay code from running until the DOM and Facebook's SDK have both fully initialized?
Is there a reason why just doing
window.fbAsyncInit = function() {
$(function() {
both_loaded();
});
}
doesn't work?
Why not:
var jq_ready = false, fb_ready = false;
function bothReady(){
...
}
$(function() {
dom_is_loaded();
jq_ready = true;
if(fb_ready){
bothReady();
}
});
window.fbAsyncInit = function() {
fb_is_loaded();
fb_ready = true;
if(jq_ready){
bothReady();
}
}
I think this is cleaner than setting an interval and will handle either event happening first.
Probably set a flag in your fbAsyncInit function and check it in the jQuery load:
$(handleLoad);
function handleLoad() {
if (!facebookLoaded) {
setTimeout(handleLoad, 10); // Or 100 or whatever
}
else {
// You're good to go
bothLoaded();
}
}
I expect there's already some global you can check for whether Facebook is loaded (I haven't used the Facebook API). If not, you can use your own flag (ideally not a global):
(function() {
var fbLoaded = false;
window.fbAsyncInit = function() {
fbLoaded = true;
};
jQuery(handleLoad);
function handleLoad() {
if (!facebookLoaded) {
setTimeout(handleLoad, 10); // Or 100 or whatever
}
else {
// You're good to go
bothLoaded();
}
}
})();
You might want to check out this explanation
http://pivotallabs.com/users/jdean/blog/articles/1400-working-with-asynchronously-loaded-javascript