I have a website which uses top in JavaScript to show bookshops in a panel. Now i want to add this website into another website using a frame. But when I fix the URL in the src of the frame , it changes the hierarchy of the pages or images and the bookshops are not shown.
So "top" is actually "window.top" (but since window is part of the global scope you can get away with just "top"). If you read up on what window.top does, you'll discover that it returns "a reference to the topmost window in the window hierarchy". In other words, if you have:
Frame Page B
Famed Page C
and you invoke window.top from either one, you'll get the same window object back (the one for page B).
However, if you instead have:
Frame Page A
Frame Page B
Famed Page C
window.top will always return the window object for page A, whether you call it from A, B, or C.
What I think you want to use instead (although it's hard to know without seeing your site) is window.parent (ie. "parent" if you don't want to bother with "window."). This property returns the immediate parent of the window in question. If you invoke this from C, it will ALWAYS return B's window, even if B is framed inside A. This should allow you to frame your (framing) page however you want, without messing up the logic of the innermost frame.
Hope that helps.
I'm not sure if i really understand your problem. (o;
This should be a simple form of the default frameset of your site.
<html>
<frameset rows="50,50">
<frame name="bookframe" src="bookframe.html" />
<frame src="default.html" />
</frameset>
</html>
And this should be the default.html with the javascript code to control the bookframe panel.
<html>
<body>
<script>
parent.frames["bookframe"].location.href = "uri";
</script>
</body>
</html>
As you can see, i'm using the name of the frame instead of top.
Include the framset from my first listing into a new page using an iframe and everythings is still working.
<html>
<body>
<iframe src="frameset.html" />
</body>
</html>
If your website from the beginning uses just an iframe instead of a frameset, it is still working by using the name instead of top.
HINT:
the name should be unique. there should be no javascript variable with the same name. only microsoft ie knows why!
hope that helps!
Related
I'm trying to load a parent page into an object tag, and whilst I can get an alert to show I've got the code, I cannot get it into the <object> Any clues?
var page=parent.document.documentElement.innerHTML;
alert(page);
document.getElementById('close_skin').style.visibility="visible";
document.getElementById('show_skin').style.visibility="visible";
document.getElementById('show_skin').setAttribute("data",page);
Assuming I can get the code to appear, how can I "toggle" to a different set of styles? The parent uses ".xxx_fixed" classes, but the code in the object needs to use the ".xxx_float" classes that are also in the template CSS at top of page. (When I did it in another PERL program, it was easy just to rename the tags in the <body> from "class='xxx_fixed' " to "class='xxx_float' " (Can't do that so easily with global javascript replace as that would also rename the classes at top of code as well!)
I have just tried adding some script to the top of the var page object - which MAY work if I can get the code to appear ...
+'document.getElementById(\'icon_outer\').setAttribute(\'class\', \'icon_outer_float\')'
If you're interested as to the "why", the "fixed" keep menu / top bar fixed in one place when viewed in full screen browser, but the 'float' makes everything move in unison within the <object> "window" allowing viewer to pan around the template page like a static magnifying glass;
.menu_back_float{position:relative;top:0px;background-color:#f5eca4;min-height:520px;height:auto}
.menu_back_fixed{position:relative;top:35px;background-color:#f5eca4;min-height:550px;height:auto}
To load the parent page into an <object> element, you have to specify the URL of the page. To get the code and place it in a alert box, you can use jQuery's $.get() method (as long as you load it via a proxy domain), like this:
HTML:
// I'm just using W3Schools just to save time
<object data="http://www.w3schools.com/" width="1500" height="1200">
<embed src="http://www.w3schools.com/" width="1500" height="1200"></embed>
Your browser does not support the object tag.
</object>
JavaScript:
window.jQuery.get("http://www.yourdomain.com/?url=www.w3schools.com", function(response) {
window.alert(response);
}
For the second part of your question, you can use jQuery to change the name of the class from .xxx_fixed to .xxx_float:
function main() {
$('object').removeClass('xxx_fixed').addClass('xxx_float');
}
$(document).ready(main);
Hopefully I have answered your question correctly and thouroughly, and if I haven't, feel free to let me know so I can edit this.
I have 2 frames in one page like this (home.html)
<frameset rows="50%, 50%">
<frame id="treeContent" src="treeContent.html" />
<frame id="treeStatus" src="treeStatus.html" />
</frameset>
and then in one frame (treeStatus.html) I have something like
<body style="margin: 0px">
<div id="statusText">Status bar for Tree</div>
</body>
I want from the top window to manipulate the div located in the child frame via jquery (e.g show and hide).
I have seen several questions like this and they suggest the following
$(document).ready(function(){
$('#treeStatus').contents().find("#statusText").hide();
});
I do not know if this works with iframes but in my case where I have simple frames it does not seem to work. The code is placed inside home.html
Here is some output from firebug console
>>> $('#treeStatus')
[frame#treeStatus]
>>> $('#treeStatus').contents()
[]
>>> $('#treeStatus').children()
[]
So how do I access frame elements from the top frame? Am I missing something here?
Answer
After combining both answers here, the correct way is
$('#statusText',top.frames["treeStatus"].document).hide();
For this to work the frame must have the name attribute apart from the id, like this:
<frameset rows="50%, 50%">
<frame id="treeContent" src="treeContent.html" />
<frame name="treeStatus" id="treeStatus" src="treeStatus.html" />
</frameset>
You could grab the Frame and div you are wanting to manipulate and pass it into a variable.
var statusText = top.frames["treeStatus"].document.getElementById('statusText');
Then you can do anything you want to it through jQuery.
$(statusText).whatever();
Though sometimes you just can't get around having to use frames, keep in mind that the <frame> tag is obsoleted in HTML5. If you ever plan on moving up to HTML5, you'll have to use iFrames.
I have nested frames. In my case, to make it work i used command:
var statusText =
top.document.getElementById("treeStatus").contentDocument.getElementById("statusText");
Then, as Charles already answered, you can do anything you want to it through jQuery:
$(statusText).whatever();
https://jamesmccaffrey.wordpress.com/2009/07/30/cross-frame-access-with-jquery/
$(document).ready(function(){
$("#Button1").click(function(){
$(parent.rightFrame.document).contents().find(‘#TextBox1’).val(‘Hello from left frame!’);
});
});
But I used :
$.post("content_right.php",{id:id},function(data)
$(parent.frames["content_right"].document.body).html(data) ;
});
For a pure jquery solution (that doesn't require top.frames etc), the following seems to work:
$('some selector for item from frame' ,$('frame selector')[0].contentDocument)
This has the advantage that it works for nested frames:
$('inner frame item selector', $('inner frame selector', $('outer frame selector')[0].contentDocument)[0].contentDocument)
I used the following successfully:
$( '#foo', top.frames['bar'].document )
(also works with nested frames that are automagically appended in top.frames)
My iframe has a variable. I want to access document holding the iframe and play with a variable defined in javascript.
e.g.
<html>
<head>
<script>var a=0;</script>
</head>
<body>
<iframe id=playmate src="document2.htm" height="150px" width="100%" scrolling="no"
border="0" frameborder="0"></iframe>>
</body>
</html>
Now in document2.htm I have a script that needs to access and manipulate var a. Can I access it directly, use jquery or plain vanilla javascript?
Its not a cross domain iframe. Promise. Same domain. Want them to play together nicely.
In the past I used to do this by getting the variable to insert a hidden input from one document into the other, but with the advent of ajax and what what I was wondering if I could just manipulate it.
So previously would write a function into the head of document, where if my var a did something, my hidden input in playmate document2 would update. Then document2 could just use hidden input and everyone was happy. When document2 played with the variable it would insert the result into hidden input in the holding document, and var a could then play properly with the new result.
I want to know if its now possible for playmate document2 to play with var a in the script without having to do hidden input. Would be very exciting.
Anyone got any ideas how to go about?
I am using jquery if that would make it easier.
I tried using this script in document2:
var c=window.document.parent.a;
But when I then output var c it tells me its notanumber. Bother. Please help. Or must I do my hidden input method.
You were close. It's actually:
window.parent.a
(window.parent returns a window object, and variables are children of the window object not the document object.)
I need to be able to open a link to a specific URL that is within an iFrame; the link is generated by php and I can't change the source code, so I need to change the link in the iFrame dynamically, if possible.
What I'm doing is this: on a non-profit organization's site, I have an affiliate store (generated by php) displayed within an iFrame on a page in order to make it more styled with the rest of the site. The php store pulls products from an affiliate service; the link to the store.php is in the same domain as the main non-profit's site.
The problem is the final "Buy Now" link from a product opens the final destination e-commerce store within the iFrame, and as such the page is stuck in the iFrame and looks bad and one must scroll V and H to see it and check out.
The link I need to open in a new window always has the class "av_buy_now" I have access to the CSS file, which I can change. I have access to the PHP files, i.e. shop.php, but it doesn't appear that the final link is generated locally. I'm showing the iframe this way:
<iframe src="http://nonprofit.org/shop/mj/shop.php"></iframe>
Is it possible to use jQuery or Javascript to find the links to mydomain.com with that one class and add a new window attribute to them? Or is there a better way? Thanks
Without some code I don't know the exact structure of your code, but I this could do the job. It requires jQuery to be in the iframe too.
$('iframe')[0].$('.av_buy_now').filter(function() {
return $(this).attr('href').indexOf('mydomain.com') > -1;
}).attr('target', '_blank');
You can change it if some how you can manage to execute this kind of code, changing class is little troublesome, of you got an id on it do something like this.
PAGE.html:
<button onclick="openinnewwin()">Get It</button>
<iframe src="test.html" id="ifrm"></iframe>
<script language="javascript">
function openinnewwin(){
ob=document.getElementById('ifrm');
if ( ob.contentDocument ) {
ob.contentDocument.getElementById('a').target="_blank";
}else if ( ob.contentWindow ){
ob.contentWindow.getElementById('a').target="_blank";
}
}
</script>
test.html:
Hello
Let me preface this with... I have referenced this question/answers and it seems to contain clues, but i'm still missing the whole picture
Run JQuery in the context of another frame
Essentially, the structure of the index page is this
<html>
<body>
<div class="frames-wrap">
<iframe id="this-iframe" src="location.php">
</iframe>
</div>
</body>
</html>
location.php then contains a frameset (ahem, not my idea...) that has two frames that are set up like so...
<frameset cols="350,*">
<frame src="search.php" id="frame_search" name="search"/>
<frame src="edit.php" id="frame_edit" name="edit" />
</frameset>
if i want to manipulate objects between the index page and these elements how would i go about this?
I keep thinking the context should be something similar to window.parent.frames[0].document... what else am i missing?
Preface: You wont be able to access the iframes contents unless it originates from the same domain.
To select elements in your iframe you could use a jQuery call like this
element = $("#this_iframe").contents().find("#frame_search")
The key is to use the contents() function. See Traversing/contents
I think the link from technicolorenvy has the answer, but the selector has a lesser known second parameter where you can set the context.
Something like this:
var iframeDoc = document.getElementById('myIframe');
iframeDoc = (iframeDoc.contentWindow) ? iframeDoc.contentWindow : (iframeDoc.contentDocument.document) ? iframeDoc.contentDocument.document : iframeDoc.contentDocument;
// From the parent window
$('p', iframeDoc).html('Hello from parent');
http://docs.jquery.com/Core/jQuery#expressioncontext
Giving your frames ids that are valid JavaScript identifiers would help, then you could use constructs such as window.top.this_iframe.frame_edit.document as your context.
These were all helpful. I kept bombing when I was attempting to get past the iframe in the DOM. THis would appear to be from the fact i had code residing in the ready() method, but the frameset that was being called within the iframe was not loaded by the time that had $(document).ready() fired.
Thanks for all the great help and feedback!