I'm working on my website and the main page (index.html) is composed of two frames: page1.html and page2.html. This is the code:
<!DOCTYPE html>
<head>
<frameset rows="16%,84%" framespacing="0" border="0" frameborder="0">
<frame name="page1" target="page2" src="page1.html" scrolling="auto">
<frame name="page2" src="page2.html" target="_self" scrolling="auto">
<noframes></noframes>
</head>
</html>
The first one works as a fixed content of the page that contains
multiple links to the rest of the site. It is absolutely important
that this page remains open every moment.
The second is the "body", the content area, wich is replaced when any
of the links are clicked.
So here's my problem: if any page is accessed not from index.html, for example, google, page1.html will not exist, since it only opens through index.html and the site will be missing it's main links.
I'm looking for a code that will check if the page "page1.html" is present and if it's not, open it as a frame.
The closest I've got was this javascript code:
<script language="javascript">
window.onload=function(){
if(self==parent)
window.location.href = "index.htm"
}
</script>
It'll redirect any user who enters a page if not from index.html, to it. But that's still no good. Any clues?
When I read your question, first thing that crossed my mind was to read and act upon window.frames.length. Exactly what you have done yourself.
However, you could pretty much see a frameset and frame as deprecated technologies nowadays. Instead, put the links in a HTML5 <nav> or regular <div>, then put the content in a HTML5 <article> or another regular <div>. Next load the content dynamically using vanilla/plain JavaScript or a framework such as jQuery.
If you insist on putting the navigation links in a "frame" that never goes away, and you want to load HTML files into a sub part of the screen, then I'd still put the navigation links in a <nav> or <div> and use an <iframe> for the content.
Frames are deprecated but anyways:
Check if the page is a parentframe like this:
if(window.top == window.self)
window.top is the parent frame and window.self is the current frame. It they are equal, there is no parentframe(set).
Related
I am having a problem with an iframe (Java servlets) based website which looks somewhat like this:
<!DOCTYPE html>
<head></head>
<body>
<iframe id="top" name="top" src="$link.setAction('top').relative()"></iframe>
<iframe id="content" name="content" src="$link.setAction('content').relative()"></iframe>
<iframe id="footer" name="footer" src="$link.setAction('footer').relative()"></iframe>
</body>
</html>
Because each of the iframes is a standalone page, if a user decides to open a link from within any of the iframes, the page that is loaded in a new window or tab looks broken as it is only one part of the whole website.
I was wondering if there is a way to detect whether the user chose "open in a new tab" or "open in the new window" from the browser. Then, I would have to make sure that after this happens, all the iframes are loaded in a new window.
Let me know if there is a better solution, as well.
Use the target attribute to solve your problem when user is navigating through the iframes.
Your iframes are already named top, content, and footer. You can also place the three iframes inside of a parent iframe, which you can then name something like main_iframe.
Then for your links, specify the name of the iframe you want them to open in using the target attribute.
Example link inside the top frame which opens only in top frame
Example link inside the content frame
Example link inside the bottom frame
Example link which opens in the parent frame
You can then disable the right click event using Javascript oncontextmenu:
window.oncontextmenu = function() {
return false;
}
I have an issue with knowing whether my iframe placed inside a HTML doc is visible (above the fold) or not.
My webpage : https://oneserver.com/index.html
<html>
<head>
</head>
<body>
<iframe src="https://otherserver.com/index.html></iframe>
</body>
</html>
The other webpage (not the that should do something when the parent iframe is visible :
<html>
<head></head
<body>
<script>
if(document.isVisible()){document.style.background="red"}
</script>
</body>
</html>
I tried with Page Visibility API and a jquery trick, but I found no solution so far. Can you please help me on that matter ?
Thanks a lot !
In order to determine if it is visible, it has to be able to detect the size of the parent window and how far that window has scrolled.
Standard cross-origin security makes this impossible to achieve from inside the frame.
The best you can do is to have the code in the parent page detect when the frame enters or leaves the view, and then use the postMessage API to tell the page in the frame about that event.
So I have a winforms(windows) application and it has a form that reloads a datagrid every 30secs, this form has a few other controls in it as well.
I am trying to convert this application to the web(ASP.NET MVC5) and I trying to figure out a way to do the reload portion of my application.
I have the page created and I have a button on the page that reloads the data on the table(partialview is returned). How can I make that partial view auto reload itself? Without using javascript or jquery?
You mentioned a div specifically, but I don't think that's possible. You could however use an iframe, maybe.
You could use a refresh header on a page embedded in an iframe.
So, we'll call the file that goes in the iframe refreshing_form.html and here's its structure:
<html>
<head>
<META http-equiv="refresh" content="5;URL=refreshing_form.html">
</head>
<body>
<!-- Your content here -->
</body>
</html>
And then in the main page, we have the iframe...
<iframe src="refreshing_form.html"></iframe>
The refreshing_form.html will reload itself in a loop forever. The containing page with the iframe will not reload (though the content of the iframe will). Poor man's ajax.
However, this seems like a lot of cludge to do something that javascript is really good at. Are you sure you can't use it?
I want to do something where i have a link on a page called home.php that links to facebook , when you click on this link i want it to take you to a page called frame.php with a header at the top and the facebook link in an iframe. like this: http://themeforest.net/item/ime-portfolio-web-app/full_screen_preview/2918523 can anyone advise what the best way to do this is. If you look in the source of that link you'll see they have a header followed by an iframe with the previous link propagated into it.
Hope this all makes sense, if not heres some basic coding of what I'm trying to acheive:
link
---Next Page
<header>My website name/logo</header>
<iframe src="propagated iframe link from previous page">
You need to create a new page which contains the header and an iframe below. This page needs to take a URL in via the query-string and then output the url as the src of the iframe.
An example PHP page (iframe.php) (Just the bare minimum stuff):
<html>
<head>
</head>
<body>
<div id="header">Your header</div>
<iframe src="<?$_GET['url']?>"></iframe>
</body>
</html>
Then you call this page like so:
Open page
This should give you an idea how it's done, but note that you might need to check the incoming URL and only allow certain domains etc. in case you do not want users to be able to open what ever URL they want through your iframe.php page.
That is not possible since your cannot load Facebook in an iframe, it's forbidden.
Otherwise, your frame.php page could have simply contained a <header> and the <iframe> below.
So I have a form that I built with Google Docs because it seemed easier than going from scratch. I've gotten this to work by copy-pasting the code from google's page to one on my domain.
I managed to get it to auto-size its height with this lovely little script I found here: http://www.frontpagewebmaster.com/m-89000/tm.htm (this is not another thread about HOW to dynamically resize an iframe)
function changeContent() {
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
and the iframe on MY displayed page:
<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>
But now when I hit submit, the confirmation or error page opens in the _parent window (might be _top) - instead of in the iframe (_self, which is supposed to be the default?). target="" is depreciated and doesn't work. This also happens with ANY link inside the iframe.
I've tried a couple different resize scripts, but I don't know enough to figure it out? Or the code doesn't actually work for my purposes? I'm not sure... Here's what I have working: http://fiendconsulting.com/60minutedesign/form-embed.html
What I need: Something that resizes the iframe content on first load of the Parent page and which opens all links in their _self frame/page/whatever.
What I don't care about: Resizing the iframe to fit the content of subsequent pages. If I click a link inside the iframe, I don't need the iframe to resize to whatever page I just went to.
I'm a self-taught programmer and I have some interesting gaps in my knowledge. I also just started learning JS and PHP and am at the Read, Comment and Cannibalize stage. It's better to assume I don't know, and it would help me a LOT if you told me where to Put the code (which document and where in the document). :)
I'm unsure of what you are trying to do because the links you provided do not seem to work; however, I believe your problem might be because of your resize function.
Your function:
function changeContent() {
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
You take the element 'contentDiv', you take the HTML of your 'iframe' and then you set the same to your content div. This results in your 'iframe' not existing any more.
For example:
let's say my content div had this:
<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>
My iframe has only 1 link: Example Link
After your function, your contentDiv now looks like:
<div class="right" id="contentDIV">
Example Link
</div>
you have effectively removed your iframe and put the contents of the iframe (the link) into your main div. Now if you click on the element, it'll automatically open on the same page - i.e. the 'parent' but there is no parent anymore!
So going forward, you should not be replacing the content; instead you should be modifying the height/width of the iframe. Have a look at:
Adjust width height of iframe to fit with content in it