Call function inside iframe - javascript

im trying to do something here. I have a document which I set an array. Then, jquery takes this array and appends an iframe for each value:
<script>
var containers = new Array("test1", "test2");
</script>
This results is 2 iframes, identified by id with his name. Ok. perfect, working. Then, inside of each iframe, it calls a document. Inside this document, I have a function called play().
I am testing play() by returning an alert. Whenever I click on a button, it works:
$("#viewport .next").click(function(){
document.getElementById(containers[current]).contentWindow.play();
});
This works. Perfectly. But I it put this function to trigger on document ready, it doesnt works.
$(function() {
document.getElementById(containers[current]).contentWindow.play();
});
It returns to me:
Uncaught TypeError: Object [object Window] has no method 'play'
Whats am I doing wrong guys?
Thanks!
EDIT
Tried to apply onload on iframe. Didnt work.
var initialFrame = containers[qual];
initialFrame.onload = function() {
document.getElementById(initialFrame).contentWindow.play();
};
EDIT2
For some reason, it started working. Thanks!

Wait for the load event of the iframe first.
initialFrame.addEventListener("load", function() {
initialFrame.contentWindow.play();
});

You would generally listen for the iframe's load event like this:
$("#iframe").load(function(){
// iframe is loaded
});
... but I had trouble with this recently so I instead checked for the contents of the iframe over and over until it had loaded, like this:
function loadFrame() {
if($('body', $('#iframe').contents()).length != 1) {
setTimeout(loadFrame,500);
}
else {
// iframe is loaded
}
};
loadFrame();
Not sure if this is the best solution, but it works.

Related

Iframe Input has uncaught TypeError: Cannot set property 'value' of null

I have an input inside an iframe that I would like to put in a preloaded value after the page has loaded. I've put in this code so far:
<script>
jQuery('iframe').load(function(){
jQuery('iframe').contents().find('input#ysi_subject').bind('change',function(e) {
var title_name = "DO I LOOK LIKE I'M WORKING?";
jQuery('input#ysi_subject').val(title_name);
});
});
</script>
but when I look at the console log, I get this error:
Uncaught TypeError: Cannot set property 'value' of null
Can anyone help explain why it's not catching the input?
This is because you are trying to access the DOM prior to the DOM elements actually being loaded, so any references to the DOM in this case will output null. Place the code in a $(document).ready() handler in order for this to work:
... <!-- jQuery reference -->
<script>
$(document).ready(function() {
// your code that you are trying to run
});
</script>
* Note that I simplified it down to show what I am really talking about.
The change event is firing from within the iframe back to the parent window.
$("input#si_subject") does not exist in the parent window.
jQuery('iframe').load(function(){
jQuery('iframe').contents().find('input#ysi_subject').bind('change',function(e) {
var title_name = "DO I LOOK LIKE I'M WORKING?";
// this would work
jQuery('iframe').contents().find('input#ysi_subject').val(title_name);
// this is better
$(this).val(title_name);
});
});

Uncaught TypeError: topFrame.window.changeSelectedBarStyle is not a function,why?

this is my function changeSelectedBarStyle:
function changeSelectedBarStyle(tdId){
$("#menuTable td").each(function(index){
if(this.id == tdId){
$(this).removeClass("menuPanel");
$(this).addClass("menuPanelSelected");
}else{
$(this).removeClass("menuPanelSelected");
$(this).addClass("menuPanel");
}
});
}
this is what i get from console:Uncaught TypeError: topFrame.window.changeSelectedBarStyle is not a function
and it turns a blank page.
but,this error only shows at the first time.if refresh the page,everything is all right.
----------------edit for more info---------------------
this is the function where call it,and i add some log(shows when the page is load correct not blank page this time):
function changeTopFrameBarStyle(pageType){
topFrame.window.changeSelectedBarStyle(pageType);
console.log(pageType);//job(it is correct)
console.log(topFrame.window.changeSelectedBarStyle);//changeSelectedBarStyle(tdId)
console.log(topFrame.window.changeSelectedBarStyle(pageType));//undefined
console.log(topFrame.window);//Window webSiteTopMenu.jsp(this page is the function changeSelectedBarStyle exists)
}
and this it is the page that call the below:
$(document).ready(function() {
window.parent.changeTopFrameBarStyle("job");
}
it is the matter with:
$(document).ready(function()
because before this happen ,it is using this:
window.onload= function(){
window.parent.changeTopFrameBarStyle("people");
};
It's likely that topFrame.window.changeSelectedBarStyle is undefined. console.log(...) it to verify.
It might be that the contents of the frame have not loaded yet. Access topFrame on the window.onload event, which ensures that the DOM, all images, scripts, and frames are loaded.
Note that jQuery's ready event is fired after only the DOM is loaded, and so the frame content won't have been loaded at the time.
If you are trying to access the window object of an iframe you might be looking for the contentWindow property instead.

have function work after div content is updated

I have a div with content in it. When the page loads, this function works fine. But when I update the div with content using javascript, this function fails to work.
Can anyone help me figure out what I should do to make this work?
$("textarea.indent").each(function(){
var indentWidth = $(this).siblings('[class=indent]').width();
if(indentWidth != null)
$(this).css('text-indent', (indentWidth+5)+'px');
});
Are you loading $("textarea.indent") dynamicly?
Jquery binds all events on document ready ie. when the page loads. That means that elements added after the page is done loading won't get bound to that event. To fix this you need to dynamicly bind your events as well. Like this..
$.ajax{
...
//Some ajax call
success: function(){
//Bind event
$("textarea.indent").each(function(){
var indentWidth = $(this).siblings('[class=indent]').width();
if(indentWidth != null)
$(this).css('text-indent', (indentWidth+5)+'px');
});
}
}
It doesn't have to be a ajax request thats add the elements, but my point still stands.

Check if iframe is loaded inside $(document).ready

I want to check if iframe is loaded with the following code:
$(document).ready(function() {
jQuery('#iframeID').ready(somefunction);
}
It seems that 'somefunction' is called before iframe is loaded (the iframe is empty - just empty html-head-body).
Any idea why this happens?
Thank you.
Try this instead.
$('#iframeID').load(function() {
callback(this);
});
While dealing with iFrames, it is good enough to use load() event instead of $(document).ready() event.
This is because you're checking if the iFrame is ready, not the document inside.
$(document.getElementById('myframe').contentWindow.document).ready(someFunction);
should do the trick.
I have tried:
$("#frameName").ready(function() {
// Write you frame on load javascript code here
} );
and it did not work for me.
this did:
$("#frameName").load( function() {
//code goes here
} );
Even though the event does not fire as quickly - it waits until images and css have loaded also.

JavaScript Dynamic onClick problem

I am trying to give a button an onclick event when a certain thing on a page changes. I have tried to do it many different ways and none have worked. What am I doing wrong?
Below are what I have tried.
document.getElementById(subDiv).onclick = function() { alert('Error. There is an error on the the page. Please correct that then submit the page'); };
document.getElementById(subDiv).onclick = "alert('Error. There is an error on the the page. Please correct that then submit the page');";
function redErrorAlert()
{
alert('Error. There is an error on the the page. Please correct that then submit the page');
}
document.getElementById(subDiv).onclick = redErrorAlert;
document.getElementById(subDiv).setAttribute('onclick',redErrorAlert(), false);
document.getElementById(subDiv).setAttribute('onclick','redErrorAlert()', false);
Note: subDiv is a variable containing the id of the element.
You need to wait for the DOM tree to be created before you do queries on it.
Make sure that this all happens within a context that is created after the DOM tree has been built:
window.onload = function() {
document.getElementById(subDiv).onclick = function() { alert('Error. There is an error on the the page. Please correct that then submit the page'); };
};
document.getElementById() takes a string containing the ID of the element you're trying to find. Assuming you're looking for the element with id 'subDiv', you should be calling document.getElementById('subDiv').
(It's also possible that the variable subDiv in your code is a string containing the ID, but since you didn't mention it I'm assuming that it doesn't.)
EDIT: If you were to go with virstulte's suggestion of using jQuery, you'd attach a function to the document.ready event in order to ensure that the DOM has been built by the time your code runs. Example:
$(document).ready(function() {
$("#subDiv").click(function() { alert("Test!"); });
});
This sounds like jQuery territory here. Once you learn the ins and outs of jQuery, things like this are a snap to take care of, and you'll find yourself writing a lot less JavaScript.
First, get jQuery from http://jquery.com/
Then put this in your code to bind the event:
$('#idOfElementToBindClickEvent').click(function(){
alert('Error.');
});
jQuery basically provides a way to manipulate elements using CSS-like selectors.
try
document.getElementById(subDiv).onclick = alert('Error. There is an error on the the page. Please correct that then submit the page');
or
function redAlert() {
alert('Error. There is an error on the the page. Please correct that then submit the page');
}
document.getElementById(subDiv).onclick = redAlert();
First case: you need to call the function, and you've assigned a string
Second case: you've assigned a function and you were not calling this function

Categories

Resources