代码改变世界

javascript Frame和IFrame

2012-09-17 12:35  youxin  阅读(1245)  评论(0)  编辑  收藏  举报

Frames is an old-school way to split a browser window in several zones, so called frames, where each frame behaves as a separate window.

Basic (grandpa’s) frames

The HTML for basic frames could look like this:

<HTML>
<FRAMESET cols="20%, 80%">
<FRAME src="left.html">
<FRAME src="right.html">
</FRAMESET>
</HTML>

The HTML document which as frameset instead of body splits browser window in sections. In the example above, there are two of them.
The left one is 20% of width, it loads left.html, the right one is 80% and loads right.html.

The frameset element can be nested and provides several ways to split the window: either vertically or horizontally. Frames are allowed to contain frames. So, the browser window may be split into cells the way you like.

Each frame loads separate document. Reloading or navigation of a frame does not affect other frames.

 The basic frames are deprecated. The frameset tag and it’s helper tags frame/noframes are removed from the modern HTML5 standard.

 

Actually, basic frames are out of use by now. They are given here for historical reasons and completeness only. So, we’ll move forward to more advanced frames stuff which is really used.

Inline frames or iframes

Inline frames provide a way to embed another page as a rectangular subwindow. For instance, here is an inline frame with top of http://javascript.info:

<iframe src="http://javascript.info"></iframe>

Usually you’d also set width, height etc. Almost all properties can be assigned with CSS, with a minor exception of frameborder.

Removing the native frameborder

To remove the border around the iframe in an IE-compatible way, it should be set as an attribute.

In the example below, the first frame is bordered by default, the second is unbordered using CSS, and the last one has frameborder="0" which will work for IE (including IE9).

Check this example in IE to see that only the last way works.

<style> * { width: 100px; height:40px } </style>
<ol>
<li><iframe src="JavaScript:'content'"></iframe></li>
<li><iframe src="JavaScript:'content'" style="border:0"></iframe></li>
<li><iframe src="JavaScript:'content'" frameborder="0"></iframe></li>
</ol>

So, one usually sets frameborder="0" and applies custom border with CSS if needed.

一般而言，我们设置frameBorder="0"就可以移去边框了。

Iframe src property

As you noticed in the example above, the src attribute may be either standard or JavaScript:.... In the latter case, the code is executed and the result is used as content.

Iframe without src 没有src的iframe是不安全的，chrome会报错。

An iframe without src attribute is wild and awry.

It leads to problems in older browsers. In newer IEs it has problems with HTTPs: iframewithout src gives non-secure warnings on SSL-enabled page.

The empty src="" won’t work, because it actually means to load the URL referenced by “”, that is the current page.

To create an empty iframe which works well on IE HTTPs, one should usesrc="JavaScript:''" syntax.

或者我们可以在页面加内容src="javascript:'content'";

var ifr = document.createElement('iframe')
ifr.src = '/my/url'
document.body.appendChild(ifr)

Accessing the inner document

An iframe element is just a DOM element, like any other. The only difference is that there exists a related window object. It is referenced in contentWindow property.

So, iframe.contentWindow.document will be the inner document.
You can access it or modify from parent window if both iframe and the parent come from one domain/host/port (security limitations are discussed more in detail in the next sections).

In the example below, the function makeGreen accesses the document of the iframe element and modifies it.

<iframe src="JavaScript:'content'" style="height:60px"></iframe>

<script>
function makeGreen() {
var iframe = document.getElementsByTagName('iframe')[0]
var doc = iframe.contentWindow.document
doc.body.style.backgroundColor = 'green'
}
</script>

<input type="button" onclick="makeGreen()" value="click me">

Access via window.frames

There is a special property window.frames which allows to access iframe window objects directly.

There are two forms of access:

indow.frames[0] - access by number
window.frames['iframeName'] - access by iframe name

 

Frames hierarchy

A window has frames collection to access the frames.

The frames, in their turn, has parent property which refers to the enclosing window:

window.frames[0].parent === window  // always true

window.top

he top property returns the topmost browser window of the current window.

window.top //最顶层窗口
window.self //当前窗口
window.parent //父级窗口

 

Iframe onload event

A window has onload event which fires when it is loaded completely. But in case of iframe, there are two ways to catch onload:

  1. Assign the handler to iframe window, like frames[0].onload = ...
  2. Assign the handler to iframe DOM element: iframeElem.onload = ...

The difference is demonstrated in the example below:

<iframe src="http://google.com/" name="google" style="height:100px"></iframe>

<script>
  // set onload on element
  document.getElementsByTagName('iframe')[0].onload = function() {
    alert('Frame element loaded')
  }

  // set onload on window
  frames[0].onload = function() {
    alert('Window loaded')
  }
</script>

Run the example above. You’ll see that only the iframe attribute works, because it doesn’t depend on cross-domain access policy like setting onload on a window from another domain.

来源:http://javascript.info/tutorial/frames-and-iframes