i have this code which is suppose to get array values from iframe to the parent window
$("#close_nr").bind("click", {page: this}, function (e) {
var chkroomArr = new Array();
$("input[name='name'].checked").each(function () {
chkroomArr.push($(this).val());
chkroomArr.toString();
$("#RoomCategoryID", window.parent.document).val(chkroomArr);
});
$(".yui3-button-close", parent.document).trigger("click");
$(".yui3-panel-content", parent.document).remove();
});
how can i do this code to work because it is not passing the require value to the parent window. and how can i get the value to display went it is in the parent window
thanks in advance
Create a function in parent - window and call them instead of set value. E.g:
in parent window:
function SetValue(valToSet) {
$("#RoomCategoryID").val(valToSet);
}
in "click" - event call
window.parent.SetValue(chkroomArr);
instead of
$("#RoomCategoryID", window.parent.document).val(chkroomArr);
EDIT:
For $(".yui3-button-close", parent.document).trigger("click");
$(".yui3-panel-content", parent.document).remove();
also is better to create a function in parent - window and call it.
You can refer to this question: Better way to pass many form input values from child to parent window
if the URL of the iframe src is not in the same domain as the parent, there could be cross-domain security issues that prevent manipulation via javascript, as per the same-origin policies.
Related
An ad provider wants us to add some Javascript to our site that'll allow them to resize the iframe their ad is served into. I've been going through the code, and part of it is this loop:
var topIframes = top.document.getElementsByTagName('IFRAME');
for (var i = 0; i < topIframes.length; i++) {
if (topIframes[i].contentWindow === self) {
// found iframe that served the ad
topIframes[i].style.height = sz + 'px';
}
}
I can see it's grabbing all the iframes in the document and adjusting the height of one or more of them. But I can't figure out what the condition's doing.
I know contentWindow's the window inside an iframe, and looking at What's the difference between self and window? I see that "self" is a reference to the window object. But which window object? The parent window or the window inside the iframe? Is there even a window inside the iframe? Why check that the window inside an iframe is the window inside an iframe?
////////////////////////////////////////////
EDIT
At Snuffleapagus's request, here's the long version:
<script type="text/javascript">
// iframe shrink function that needs to be on the hosting page
rp_resize = function (sz) {
try {
var topIframes = top.document.getElementsByTagName('IFRAME');
for (var i = 0; i < topIframes.length; i++) {
if (topIframes[i].contentWindow === self) {
// found iframe that served the ad
topIframes[i].style.height = sz + 'px';
}
}
} catch (e) {
}
}
</script>
<script>
// this is the code that goes in the passback to initiate the function
try {
if (typeof(rp_mpu) === 'function') {
rp_resize(250);
}
} catch (e) {
}
</script>
<script language="JavaScript" type="text/javascript">
rp_account = '<account-id>';
rp_site = '<site-id>';
rp_zonesize = '<zone-id>-<size-id>';
rp_adtype = 'js';
rp_smartfile = 'http://<url>/..../revv_smart_file.html'; // this should be the URL path to the friendly iframe that needs resizing
</script>
<script type="text/javascript" src="http://ads.<url>.com/ad/<account-id>.js"></script>
////////////////////////////////////////////
EDIT
Here's a possible clue from the ad provider in answer to my question about the condition. Don't know how much use it is, as he's not a developer.
"The line of code you are looking at is trying to determine if it is the iFrame from which the function has been initiated so it can be resized accordingly."
From what I understand working with Javascript and how it can access iFrames, the provider is assuming that you have multiple iFrames on the page. Also, it assumes that the iFrame they are looking for does not have an ID to reference easily.
Based on this, after the frame with the ad content loads, at some point it will call rp_resize(250);. However, the function rp_resize does not know which of the iFrames on the page it was called from. The script loops through all the iFrames on the page until it finds the one that called the function. This is how it knows which frame to call.
Hopefully that makes sense and / or answers your question.
I think, self refers to the parent window. To check, type the following in your browser console and see the result :
self == window
.contentWindow will return null if the iframe hasn't completely loaded. It looks like the code is looping through iframes, checking if they are loaded, and if so, resizing them.
Edit: musefan is right; I worded it incorrectly.
Edit 2: Why check that the window inside an iframe is the window inside an iframe? It's null if it's not loaded yet; if it is loaded, it's a window.
I am creating an iframe dynamically for submmiting a form,after submitting i need to remove the iframe form the page.I removed itas follows but it is not removed,
function remove(){
var frame = document.getElementById("upload_iframe"),
var frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.removeChild(frameDoc.documentElement);
}
How to remove the ifarme form the form completely.
Thanks
Frame has 2 behaviors: frame as document element (like div or another DOM element) and frame as window element (like global window object). So if you want to remove iframe from DOM tree you have to work with iframe like with DOM element
function remove(){
var frame = document.getElementById("upload_iframe");
frame.parentNode.removeChild(frame);
}
A way I've been doing it (since I have a large amount of iframes) is using jQuery,
$('iframe').remove()
or in the case of only one iframe you can remove it using its ID, still with jQuery
$('#iframeID').remove()
Inside my iframe i have a dial that spits out angle when the needle moves. Instead of getting both dial and needle both inside frame, is it possible to show the angle value somewhere else in my parent page outside the iframe. This is the code i have.
function showIframeContent(id) {
var iframe = document.getElementById(id);
try {
var doc = (iframe.contentDocument)? window.frames[clkwise1].document.getElementId("demo").value;
alert(doc.body.innerHTML);
}
catch(e) {
alert(e.message);
}
return false;
}
The standard and cross-browser way to access the content of an iframe is:
iframe.contentWindow.document
I would expect this to work in your case:
document.getElementById("clkwise1").contentWindow.document.getElementById("demo").value
(I'd need to see the page itself to confirm it - for example I assume "demo" is an input element. Also, note your typo in getElementById)
Live demo: http://jsfiddle.net/ZWC6v/
I can't figure out what I'm doing wrong here.
I am building a website with no server-side
I have a main page with an iframe and on a button click I want the iframe's src to change and a function in it to be invoked with a passed parameter.
The function is not called for some reason.
here's my code:
the iframe:
<iframe id="main_area_frame" name="main_area_frame" src="" frameborder="0" width="100%" height="100%"></iframe>
the onclick function:
function onSubMenuClick(images)
{
//Set Images Frame
main_area = document.getElementById("main_area_frame");
main_area.src = "ImagesFrame.html";
main_area.contentWindow.initializeImages(images);
}
the function in the iframe(ImagesFrame.html):
function initializeImages(imagesStr)
{
alert("initializeImages");
...
}
some weird things I noticed are that
when adding an alert just before main_area.contentWindow.initializeImages(images);
the function is somehow called successfully.
if I set the iframe's src from the begining and skip the line main_area.src = "ImagesFrame.html"; - the function is again, called.
any ideas?
Not sure if that is the cause, but I would try putting a delay(sleep) between
main_area.src = "ImagesFrame.html";
and
main_area.contentWindow.initializeImages(images);
in order to allow the iframe to be rendered (I do not know if it is the rendered by the same frame or the browser launches a new one).
Just my two cents.
I have had success with publishing the function from the child iframe during
onload handling. For example, (substituting your funcName):
In child iframe, edit body tag (or use equivalent javascript)
<body onload='top.funcName = funcName'>
In parent page, edit javascript; now the
funcName will be generally accessible as,
value = top.funcName( )
I have two pages, the parent and from this page I am using:
window.open('OrderDetailsFull.aspx?ObjectID=' + ObjectID[1] , "TableDetails","status=0 , toolbar=0 , location=no , menubar=0 , scrollbars=yes , height=600px , width=800px");
to open a new window and manipulate data over there.
When I finish what I am doing I need the parent page to refresh so I will get the new data data in it...
From what I know the method is:
top.opener.location.reload(true);
but for some reason, it is not working in IE8 or IE9...
As I am building an application and not a general web page. It will work on Windows OS with IE (as for now it is still the most common system...nothing to do about it) so I really need to solve this problem....
I couldn't find any new solution over the web for this problem, every one say it should work like that.....
Did anyone encounter this problem? and does any one knows how to solve it?
OK, FOLLOW UP question: when I do opener.location.reload(true); does it render the parent page all over again (as it sound) or not? If it does then I'm in a big problem, if not, then there must be a way to do that...
The problem is the I have an ajax call in the parent page and for some reason it stays in it's old values when I am using it, only when I reload the child window, the parent ajax shows the real results, some code follows...
This is in the document ready jQuery function of the opener page:
$('div[id^="divTable"]').hover(
function(e){
//קבלת זהות השולחן הנלחץ
ObjectID = $(this).attr('id').split('_');
$(this).css("cursor","pointer");
//AJAX הבאת נתוני רשומת ההזמנה מהשרת ב
var OrderDetails = $.ajax({
url:'AjaxActions/OrderDetails.aspx?ObjectID=' + ObjectID[1],
async:false
}).responseText;
//צף מעל שולחן כשעומדים עליו, ניתן לראות את פרטי הרשומה של אותו השולחן DIV
$(this).append($('<div style="position: absolute; top: 0; left: -150;">' + OrderDetails + '</div>'));
//וידוא שהשולחן עליו אנו עומדים יהיה העליון
$(this).css("z-index","10");
$(this).siblings().css("z-index","1");
},
//כשיוצאים מהשולחן DIVהעלמת ה
function () {
$(this).find('div:last').remove()
}
);
This is in one of the functions in the child window that should refresh the opener:
$('#ctrl_Print').click(
function()
{
alert($('#hidItem').val());
var Items = new Array();
Items = $('#hidItem').val().split(',');
for(var i=0;i<Items.length;i++)
{
alert(Items[i]);
}
opener.location.reload(true);
window.location = 'OrderDetailsFull.aspx?OrderID=' + OrderID + '&ObjectID=' + ObjectID + '&Print=' + Items;
window.close();
}
);
10x...
It looks like IE 8 and 9 have security restrictions on refreshing the opener.
I've run into this problem where reload() works in Chrome, but pukes in IE.
Try using window.location.replace(your url and params here).
You have to collect the url and params for replace(), but it gets around the IE error message.
Example:
In Joomla 2.5 parent window launches modal for users input, where we need to reload the parent window (view) in order to run code that uses modal input.
The modal fires a function in the parent window like;
function updateAddresses(runUpdate, itemID, closeModal){
if(closeModal == true ){
SqueezeBox.close();
}
if(runUpdate == true){
//location.reload();
var replaceURL = 'index.php?option=com_poecom&view=cart&ItemId='+itemID;
window.location.replace(replaceURL);
}
}
top is used to get the outermost document within the current physical window when you're dealing with framesets and/or iframes and is not related to window.open in any way, so you shouldn't use top unless there are frames or iframes within your pop-up page. The following will do:
opener.location.reload(true);
If you want to access the parent window (or frame), you should use parent, not top:
parent.location.reload(true);
When your page is a frame inside that window, add more parents to it:
parent.parent.location.reload(true);