make an element overflow out of an iframe [duplicate] - javascript

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.

Related

Javascript replace content before visible

I want to replace certain nodes with different HTML if javascript is enabled.
My problem is that for a short moment the old code is visible and then the replaced element shows up.
What would be a text-book solution for that? Where do I need to put the javascript, preferably jquery? Is it possible anyway?
No example code , just imagine a page with a bunch of deeply nested nodes..
just use
<noscript></noscript>
tags to display content that is shown when js is disabled
DOM operations are pretty slow and in some corner cases you may experience the blink of the old content. I see two solutions:
Use a preloader screen, e.g.: Create A Custom Preloading Screen. This way you can perform all manipulations on the DOM elements in the background.
If the content of your page is static you can use <noscript></noscript> tags and this way set the content for both situations (JavaScript enabled, JavaScript disabled).

iframe setting content

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.

What are the differences between iframe and innerHTML

I was doing an innerHTML on a div element. MY lead comes and tells me that innerHTML and iFrame are both the same. Now this one was something new. I always thought InnerHTML to be different from iFrame.
[My lead]: "The issue is because he is trying to use innerHTML which
in turn is called as IFRAME for a browser"
I wanted to know the differences between an iFrame and innerHTML. Are they both essentially similar in nature? I looked but couldn't find much.
Thanks
Sounds like a communication error--e.g., if your lead means that the innerHTML of that div is just going to show an iframe as its innerHTML (or otherwise, it would sound like you need a new lead). innerHTML grabs the HTML code as a string inside of the selected element. An iframe is an element used for transcluding content (usually from other sites or other pages on your own site). Apples and oranges...
They're very different. An iframe tells the browser to load a different URL in the iframe, and it will often have it's own scrolls. But a div can be made to look and work like an iframe by setting
overflow: auto
- in the style. Maybe that's what he meant.
iframe is an HTML tag used for displaying another website or page on your page, innerHTML is used in Javascript to change the content of an element on your webpage.
They are completely different.
They are not the same. Innerhtml is a way to access the contained html of an html element. An iframe is an element that let's you display content from a different web page than the one you're currently on.

Embedding dynamically sized webpage with javascript

Okay, so first some background info: I am trying to embed a webpage within another page. The sub-page is basically a small web application written in javascript and html that takes in several screens of input (radio buttons, text boxes, etc.) and gives a screen with results at the end. Each of these screens can be a different size.
There are two methods I have tried using to do the embedding:
1) Copy all of the html and javascript from the sub-page into the main page and stick it in a div/table/whatever.
2) Keep the sub-page in its own file and embed it using embed/object/iframe.
Using the first method the page behaves as it should; the only real problem (aside from being kind of a messy solution) is that the sub-page I am embedding is actually generated by an external application, and every so often the page is replaced with a newer version. This more or less rules out using the first method as a long-term solution.
Now the second method has its own problems. Since the embedded javascript page changes in height, the frame that is holding it needs to vary in size with it. I'm able to change the size using any of the solutions given here, however these do not update the size of the frame as the user progresses through each screen.
The closest solution I've been able to come up with so far is using a document.onclick handler to catch any clicking which might cause the next screen of the sub-page to come along. The handler pauses for a very short time (to allow the next screen to come up) and then calls the necessary resizing function. However this feels like a very hacky solution, and there is also a slightly noticeable delay during with the scroll bar shows up on the side of the frame when it hasn't expanded yet to fit the new content. I'm thinking there must be a better way to do this.
If the file is on the same server/domain, you could just load it in with jQuery. Here is some jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$('#id-of-div').load('/path/to/page.html');
});
</script>
Just change id-of-div to the id of the div that you want the page to be loaded into and change /path/to/page.html to the actual URL to the page. (you don't need the domain of it, just the path to it)
I hope this helps.
If this answers your question, please remember to click the checkmark next to this to accept this answer.

Javascript popups, can I reference all js on the parent page like normal?

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

Categories