I've got a javascript include that's declared in the head of the frameset of a site, this js file has a number of methods in it. I need to call the method from one of the framesets child frames but can't quite figure it out, could someone help me out? Here's my call that's not working:
launch lightbox
Unfortunately the js needs to be added to the frameset as the lightbox needs to fill the whole screen and not just in the dimensions of the child frame where the above code sits.
Thanks,
Colin.
I think you can access it with window.top (coming from my memory though)
Related
I have been searching for this for days and was wondering if anyone could help me with the answer to this.
So, I am currently building a system which allows users to create html pages which can include css and js links and possibly inline scripts/styles within it.
I want the user to preview their output, i was originally using a div tag and adding the html output to it but as all the extra styles and scripts also affected the parent page, i decided the only option was probably to use an iframe to put the content in.
To stop bootstrap links and Jquery conflicts to the parent element, i need to run the iframe in a sandbox environment from what i know but i have no idea how to set the content of the iframe when its in sandbox mode.
If you try:-
$("example iframe element").contents().find("body").html("example html inline styles etc");
this does not work and blocks access due to the iframe being sandboxed and not allowing the origin.
Sandboxing an iframe seems to be the only way to stop multiple instances of Jquery "one on the parent and one in the iframe" from conflicting, i did try noConflict which seems to work but that does not fix conflicting multiple bootstraps being loaded in the parent and iframe elements.
does anyone know either how to add content at runtime to a iframe that is sandboxed without getting blocked access or a different unique container approach i can use?
i appreciate any help or guidance anyone could give on this as i cannot really find much information about it.
I have finally found out what the problem is with this situation, i do not need a sandboxed iframe as i now know why Jquery and Bootstrap are conflicting without having to sandbox the iframe. I see lots of posts telling you to use something like the code below to put content in an iframe.
$("example iframe element").contents().find("body").html("example html inline styles etc");
the problem with the method above is that its opening the iframe up for putting content inside it but its not specifying the closing of the iframe.
This is why even on a normal none sandboxed iframe Jquery and Bootstrap conflict because its leaking back into your parent page by not being closed. The real method for putting content into an iframe directly should be the code below as it ensures the connection is closed off appropriately.
var myIframe = document.getElementById("ID OF THE IFRAME")
var iframeDoc = myIframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write("HTML HERE");
iframeDoc.close();
by doing the above code you are not only modifying the content inside the iframe but your also closing it off once you have finished writing the content. This is very important in ensuring Iframes stick to their purpose as being a completely isolated page element and it stops js and css leaks into your parent page.
i hope this answer helps save time for anyone else who comes across this particular problem with iframes and is adding content at run time using the wrong method.
I require to find the DOM element which is adding inside of a iframe, with the iframe added. for determine to find the element added, I am using this plugin
all i doing from chrome ext.
arrive.js
body>iframe1>iframe.ssueContentIframe2>#SmartReportTabContent1>loopElements>link
like this:
document.arrive(".ssueContentIframe", function() {
console.log('.ssueContentIframe arrived', this);//works
this.arrive('#SmartReportTabContent1', function(){
console.log('arrive 2');//not working
});
});
what is wrong here? any one help me please?
To check for an element within an iframe you need to include the arrive.js library and your script that calls the arrive() function within the iframe.
If you just want to detect whether iframe is loaded there's other solutions, but if you want to muck around in the iframe you have to keep in mind cross-domain policies.
Javascript has a Same-Origin policy in which javascript on the outer page cannot access the contentWindow or DOM (or global state) of the iframe page if it does not share the Same-Origin
-- T. Stone
Seems to me arrive.js isn't the problem, it's trying to mess with an iframe.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a way to have content from an IFRAME overflow onto the parent frame?
Here is my issue:
I have two types of dialog which (should) look and act the same. One loads content directly into the page, and one uses a iframe to load content. I have an element which I need to overflow out of the iframe and show completely on the page. This element is basically an enhanced select element built with a list (ul/li). How can I make this act as a select would inside an iframe and overflow the iframe?
The first thing that comes to mind is to put the select/list outside of the iframe and position it in the correct spot, though this will require communicating between the iframe and parent more than I would like. Ideally I'd like a solution that keeps the select/list in the iframe.
You can't.
An <iframe> is an element containing a separate, distinct browser window (essentially).
Think of it literally like a window: when you look out of your window, the view of the outside stops at the windowframe.
This is in contrast to content inside, say, a scrollable <div>, which is more like a hand-held sheet of glass with some stuff painted on it and some other stuff stuck on with sellotape and hanging off over the edges.
You could use php to load the page into your current page. A lot of people consider iframes bad practice. It would only take a couple lines of php to load the page elements, instead of an iframe, which is sometimes slower.
Here is how you would do it....
<?php
include('file.html');
?>
You would put this line in a and contain it on the page just as you would with the iframe. You can use ajax/js to seamlessly change the content of the html and even load things from a server if you wish.
Imagine that the document is a picture.
Imagine that the iFrame is a real frame.
Could you make the picture come out of the frame? No.
It's exactly the same thing here.
Your best bet is to figure out a way to avoid the iFrame.
Besides, iFrames are bad practice.
$('<script/>', {
src: '/path/to/javascript.js',
type: 'text/javascript'
}).appendTo($('#iframe').contents().find('body'));
Correct me if I'm wrong, but I think that should load the JS into the iframe. I've also tried appending to head.
The problem
javascript.js is executed, but console.debug(this) in that script returns the top frame window. I've tried to verify that the script is actually included in the iframe, but don't really know how.
Additionally, running $('a') from javascript.js returns all links in the top frame, not every link in the iframe which I'd like.
Thanks for your time!
Update: I've put together an isolated test case which you also can download. Check the console and note that this is the top frame (can be verified by the variable _TOP).
This is kind of a grey area. For this specific action using jQuery, under the hood you're using importNode or adoptNode depending on the browser. However, IE won't support either (since I last researched it).
You might want to get a reference to the document, and write the script. If memory serves me right:
$('<iframe/>')[0].contentDocument.document.write('script');
I was able to make something in the same domain iframe update:
http://jsfiddle.net/maniator/DX6bg/1/
Make sure that the two URLs are in the same domain.
(including if there is a www in from or not)
UPDATE
You can test it like this:
$(function(){
var iframe = $('#iframe').contents();
$('body', iframe).append($('<div>', {text: 'this is a test'}));
});
now if you see the text this is a test in the iframe you know it is working
Are all popups the same when it comes to referencing the parent pages js variables/methods etc?
How about ajax requests from within the popup's content?
From what i understand a popup is just playing with the Z-order, so its basically still on the parents page just looks 'higher' right?
Most likely you're talking about a popup being a div (or other element) being displayed when an action occurs. this is done by having some sort of hidden element on the page that just gets displayed and maybe centered, then brought to the front (using the z-index).
if this is how you're using popup's with javascript then yes, all javascript that's on the page is accessible to the popup.
You will have to be cognizant of cross-domain scripting. However, for the simplest cases, you should be able to reference javascript on the parent page with:
if (window.parent)
{
window.parent.SomeFunctionOnParent();
}
Javascript popups are independent windows but they can refer to their owner via: window.owner