Can someone explain iFrames? - html

My understanding of the iFrame is that the content inside is exactly what is included in the src. I've seen numerous widgets like Facebook etc that use an iFrame.
When I try using an iFrame, I have an HTML file with only a div and some content inside, no head, body, etc. Just the content in HTML. But the iFrame always loads the entire page and ends up giving me a recursive iFrame within an iFrame.
I don't see how this is since my HTML file that is referenced in the iFrame is just content and nothing else. I'm not including a header, footer but all that gets displayed anyway.
I've seen where people are talking about scrolling the iFrame to a certain section and even using the div's id in the src and setting the scrolling=no. This works, but my iFrame content will reload based on user input and once it reloads it returns to the top-left portion of the page inside the iFrame.
This doesn't make any sense. Maybe this is supposed to be a widget or something?
Edit for SD to show some formatted code:
#Surreal Dreams
That's the strange thing. I'm using web2py so it might be something inherent in the backend that's causing that. The html file literally is a div wrapper with some elements inside. But I think the web2py is adding the header in there even though I'm not extending any kind of layout. I eventually did get it to work correctly by referencing the same html file saved offsite at another url. There it displayed properly without web2py interfering with the html structure.
What was happening before, I had code like this:
{{extend 'layout.html'}}
<div class="wrapper">
<page content>
<aside id="iFrame wrapper">
<iframe src="/rates.html"></iframe>
</aside>
</div>
And that's the basic structure of the web2py page where inside layout you have all your headers, footers, etc. Well what was happening is that it would generate the entire page, and where you get to the iFrame, it generates the page again inside that iFrame, and then on down to the iFrame again, which continues to infinity rendering the page inside each iFrame's page.

An iframe will always load an entire Web page, referenced in your iframe's src attribute. Even if your file only contains a div, I believe the browser considers it a full page and automatically adds a head and body.
"I've seen where people are talking about scrolling the iFrame to a certain section" => right, once the page in the iframe is loaded, you can use JavaScript to access and manipulate its DOM:
var myIframe = parent.document.getElementById("myIframe");
var window = myIframe.contentWindow;

Related

Is there a way to load full HTML code without iFrame?

I am writing a preview function to let user preview the HTML file they uploaded and do some minor editing. The HTML file will contain no Javascript and no external CSS. All CSS are either inside style tag or inline. Images, on the other hand, will always be external as we don't provide space for storing images.
iFrame is not a good solution, because:
The preview is before actually saving the content, so I cannot provide an URL for iFrame to load the page.
It is difficult to touch the element inside iFrame. As the user will be doing minor update in another text box showing the plain HTML, I will need to update the elements inside frequently.
However, if I just insert content into an <div> the repeated <html>, <head> and <body>tag will crash the page.
So, is there a way I can preview the HTML without iFrame?
if you dont want to have the main app to affect the styling of the preview, you need to use iframe. have you see iframe's content window? https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow. this might be the answer you are looking for. So basically here you try to access the DOM of your iframe. give it a try!
preview = getYourIframeDom();
code = getYourHtmlCodeHere();
preview.contentWindow.document.open("text/html","replace");
preview.contentWindow.document.write(code);
preview.contentWindow.document.close();

open html page in left side div

I am new to bootstrap css.
I have a left div that contains my menu list and I want to open the page in right side div when user clicks on that link. Many links I came across use frames which I am not using/ intend using.
This is my code:
I have this in my left panel
<li>Click me</li>
and I have this <div id="targetPanel" class="col-md-9"></div>
the code of course does not work as expected and opens my page into a new tab. Is there any way that I can open it in right side div?
NOTE: I am not using any frameworks or any other support like PHP, JSP etc. I am supposed to work with pure HTML only.
The only way to do this using pure HTML only is an iframe:
<div class="col-md-9"><iframe src="about:blank" name="targetPanel" style="width:100%;height:500px;"></iframe></div>
The target attribute of the link will refer to the name of the iframe so the link should open inside that iframe. Note: I used a fixed height of 500px for the iframe, you'll need to adjust the height to your needs. You can also find javascript snippets that can resize the iframe according to it's contents (although with some limitations).
AJAX is another option, that would involve setting a click handler on the link which cancels the default behaviour and instead, does an asynchronous GET request on the url, then parses the returned data and injects it into the div. There are many caveats to that method though, you'll have to strip out everything except the contents of the <body> tag before you inject it and the injected "document" will inherit/be affected by any styles present on your page.

Anchor not working in iframe, but works fine outside of it

For a web site I'm trying to improve, I have an anchor in an IFrame document. One the main page, the anchor tag does not respond. On other pages which also embed this same iframe document, it does respond. By itself, all links in the iframe document work when the page is loaded directly. Also, if I trim significant content from the main page, the anchor links work. I found no errors in the web developer log. I'm using FF 31.0, but IE didn't work any better. Also, the page is HTML 5.
Rather than post the actual HTML, please see page at
dreamfloatmassagespa.com (this is the main page)
and dreamfloatmassagespa.com/FloatingPage.html (this is one of the working pages)
I've tried adding the sandbox attribute, but FF doesn't care in this case. Both the IFrame and the parent frame refer to locations on the same domain. The links in question point to actual web locations and not Javascript functions.
Your div with class .row are above everything in your main content, that's why you cant click in any anchor inside the main content in the mainPage.html. Probably you did some mistake in your css in the MainPage.html.

Direct preloaded HTML content in iframe rather than src

I have HTML content (mostly e-mails) that I would like to display in an archive. Seeing as some of these records contain their own styles, images, and headers, they need to be displayed independently and confined to its container so as not to interfere with the page displaying it. I immediately thought of an iframe.
I have two ways I can do this, both are somewhat indirect. 1) I can draw an iframe that points to about:blank and use Javascript to draw the content into the iframe after the page loads. 2) I can create a secondary PHP page that returns only the content of the e-mail and point the iframe to it as the src attribute. These solutions are simple enough, but I was wondering if there is a more direct way.
I found solutions like these, but they suggest using options 1 or 2 above. The point of this question is: "Is there a more direct way to preload HTML content directly into an iframe than to rely on Javascript or a secondary page?"
Html code as IFRAME source rather than a URL
Specifying content of an iframe instead of the src to a page
I am not sure how much more "direct" you can get than to specify a page in the src attribute of the iframe.
You already link to the only answer that actually works in your question that does not include using a src page or using EMCAScript to draw the iframe content. Remember thought that data urls are still limited in the number of bytes of data they can display in most browsers because there are limits to the length of the data url itself.
I would really suggest that you use the src attribute with a seperate backend script as that will decouple and increase the maintainability of your code as you can develop the scripts responsible for the page itself seperatly from those that show the iframe content.

Page url links to pages internal frame

I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });