分类：Web

（转自：http://www.webshu.com/tutorial/tor/7,id=0408.htm）

iframe嵌入网页的用法作者：自由勇点击：MT-8000最后更新 2003-10-12

iframe并不是很常用的，在标准的网页中非常少用。但是有朋友经常问到，下面我简单地介绍一下它的用法，你只要熟练掌握这些参数足矣。

<iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。我们举第一个例子，具体代码如：

<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>，这里的URL可以是相对路径，也可以是绝对路径，效果如：

width表示宽度，height表示宽度，可根据实际情况调整。

scrolling表示是否显示页面滚动条，可选的参数为auto、yes、no，如果省略这个参数，则默认为auto。

二、如何实现页面上的超链接指向这个嵌入的网页？

只要给这个iframe命名就可以了。方法是<iframe name=**>，例如我命名为aa，写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://www.cctv.com></iframe>，然后，网页上的超链接语句应该写为：<a href=URL target=aa>

效果如下，请点击这里：中央电视台

三、如果把frameborder设为1，效果就像文本框一样，如下：

网页树树版权声明：

此文为Webshu.com独家撰稿，著作权属作者所有。

传统媒体、公众站点转载请事先联系Webshu编辑。

此文网址 http://www.webshu.com/tutorial/tor/7,id=0408.htm

（转自：http://www.htmlhelp.com/reference/html40/special/iframe.html）

The Web Design Group

IFRAME - Inline Frame

Syntax <IFRAME>...</IFRAME>

Attribute Specifications

    * SRC=URI (URI of frame content)

    * NAME=CDATA (name of frame)

    * LONGDESC=URI (link to long description)

    * WIDTH=Length (frame width)

    * HEIGHT=Length (frame height)

    * ALIGN=[ top | middle | bottom | left | right ] (frame alignment)

    * FRAMEBORDER=[ 1 | 0 ] (frame border)

    * MARGINWIDTH=Pixels (margin width)

    * MARGINHEIGHT=Pixels (margin height)

    * SCROLLING=[ yes | no | auto ] (ability to scroll)

    * core attributes

Contents Inline elements, block-level elements

Contained in Block-level elements, inline elements except BUTTON

The IFRAME element defines an inline frame for the inclusion of external objects including other HTML documents. IFRAME provides a subset of the functionality of OBJECT; the only advantage to IFRAME is that an inline frame can act as a target for other links. OBJECT is more widely supported than IFRAME, and, unlike IFRAME, OBJECT is included in HTML 4.0 Strict.

IFRAME's SRC attribute provides the location of the frame content--typically an HTML document. The optional NAME attribute specifies the name of the inline frame, allowing links to target the frame.

The content of the IFRAME element is used as an alternative for browsers that are not configured to show or do not support inline frames. The content may consist of inline or block-level elements, though any block-level elements must be allowed inside the containing element of IFRAME. For example, an IFRAME within an H1 cannot contain an H2, but an IFRAME within a DIV can contain any block-level elements.

The LONGDESC attribute gives the URI of a long description of the frame's contents. This is particularly useful for full descriptions of embedded objects. Note that LONGDESC describes the frame content while the content of the IFRAME element acts as a replacement when the external resource cannot be inlined.

An example follows:

<IFRAME SRC="recipe.html" TITLE="The Famous Recipe">

<!-- Alternate content for non-supporting browsers -->

<H2>The Famous Recipe</H2>

<H3>Ingredients</H3>

...

</IFRAME>

The WIDTH and HEIGHT attributes specify the dimensions of the inline frame in pixels or as a percentage of the available space. The FRAMEBORDER attribute specifies whether or not a border should be drawn. The default value of 1 results in a border while a value of 0 suppresses the border. Style sheets allow greater flexibility in suggesting the border presentation.

The ALIGN attribute specifies the alignment of the inline frame. The values top, middle, and bottom specify the frame's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the frame with the current baseline. To center the frame horizontally on the page, place the frame in a centered block, e.g.,

<P ALIGN=center><IFRAME SRC="foo.html" WIDTH=300 HEIGHT=100></IFRAME></P>

The other ALIGN values, left and right, specify a floating frame; the frame is placed at the left or right margin and content flows around it. To place content below the frame, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning inline frames.

The MARGINWIDTH and MARGINHEIGHT attributes define the number of pixels to use as the left/right margins and top/bottom margins, respectively, within the inline frame. The value must be greater than one pixel.

The SCROLLING attribute specifies whether scrollbars are provided for the inline frame. The default value, auto, generates scrollbars only when necessary. The value yes gives scrollbars at all times, and the value no suppresses scrollbars--even when they are needed to see all the content. The value no should never be used.

More Information

    * IFRAME in W3C HTML 4.0 Recommendation

    * Using inline frames

Maintained by Liam Quinn <liam@htmlhelp.com>

Web Design Group ~ HTML 4.0 Reference ~ Elements by Function ~ Elements Alphabetically

Copyright © 1998-2000 Liam Quinn. All rights reserved.

http://bbs.chinajavaworld.com，尤其是他们的banner，很喜欢。

转自：http://www.dvbbs.net/tech/js/2006041949627.asp

 JavaScript精简学习4：表单

作者： 来源：

阅读 156 人次 , 2006-4-19 16:47:00

43 表单构成

1: <form method=”post” action=”target.html” name=”thisForm”>

2: <input type=”text” name=”myText”>

3: <select name=”mySelect”>

4: <option value=”1”>First Choice</option>

5: <option value=”2”>Second Choice</option>

6: </select>

7: <br>

8: <input type=”submit” value=”Submit Me”>

9: </form>

44 访问表单中的文本框内容

1: <form name=”myForm”>

2: <input type=”text” name=”myText”>

3: </form>

4: <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>

45 动态复制文本框内容

1: <form name=”myForm”>

2: Enter some Text: <input type=”text” name=”myText”><br>

3: Copy Text: <input type=”text” name=”copyText”>

4: </form>

5: <a href=”#” onClick=”document.myForm.copyText.value =

6: document.myForm.myText.value;”>Copy Text Field</a>

46 侦测文本框的变化

1: <form name=”myForm”>

2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>

3: </form>

47 访问选中的Select

1: <form name=”myForm”>

2: <select name=”mySelect”>

3: <option value=”First Choice”>1</option>

4: <option value=”Second Choice”>2</option>

5: <option value=”Third Choice”>3</option>

6: </select>

7: </form>

8: <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

48 动态增加Select项

1: <form name=”myForm”>

2: <select name=”mySelect”>

3: <option value=”First Choice”>1</option>

4: <option value=”Second Choice”>2</option>

5: </select>

6: </form>

7: <script language=”JavaScript”>

8: document.myForm.mySelect.length++;

9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;

10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;

11: </script>

49 验证表单字段

1: <script language=”JavaScript”>

2: function checkField(field) {

3: if (field.value == “”) {

4: window.alert(“You must enter a value in the field”);

5: field.focus();

6: }

7: }

8: </script>

9: <form name=”myForm” action=”target.html”>

10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>

11: <br><input type=”submit”>

12: </form>

50 验证Select项

1: function checkList(selection) {

2: if (selection.length == 0) {

3: window.alert(“You must make a selection from the list.”);

4: return false;

5: }

6: return true;

7: }

51 动态改变表单的action

1: <form name=”myForm” action=”login.html”>

2: Username: <input type=”text” name=”username”><br>

3: Password: <input type=”password” name=”password”><br>

4: <input type=”button” value=”Login” onClick=”this.form.submit();”>

5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>

6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>

7: </form>

52 使用图像按钮

1: <form name=”myForm” action=”login.html”>

2: Username: <input type=”text” name=”username”><br>

3: Password: <input type=”password”name=”password”><br>

4: <input type=”image” src=”login.gif” value=”Login”>

5: </form>

6:

53 表单数据的加密

1: <SCRIPT LANGUAGE='JavaScript'>

2: <!--

3: function encrypt(item) {

4: var newItem = '';

5: for (i=0; i < item.length; i++) {

6: newItem += item.charCodeAt(i) + '.';

7: }

8: return newItem;

9: }

10: function encryptForm(myForm) {

11: for (i=0; i < myForm.elements.length; i++) {

12: myForm.elements.value = encrypt(myForm.elements.value);

13: }

14: }

15:

16: //-->

17: </SCRIPT>

18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>

19: Enter Some Text: <input type=text name=myField><input type=submit>

20: </form>

上面的encryptForm方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～

有两个主题：

一是接收数据：The JavaScript prompt - Getting user input；

二是验证数据：Create JavaScript Input Text Validation Fields

以"javascript""input"为关健字在google中搜索到这个方法如下：

http://www.webdevelopersnotes.com/tutorials/javascript/javascript_prompt_visitor_inputs.php3

The JavaScript prompt - Getting user inputGo to The JavaScript prompt - Getting user inputJavaScript TutorialGo to JavaScript TutorialWeb Development TutorialsGo to Web Development TutorialsHomepage The JavaScript prompt - Getting user input Welcome mdx In this session we'll look at the JavaScript prompt. The prompt() is a method of the window object, just like alert() or confirm(). The format for prompt() is similar to alert() or confirm() except for one addition. prompt("Message", "default value in the text field"); In addition to the "OK" and "Cancel" buttons, a prompt box also has a text field that is employed for gathering visitor input. JavaScript lets you specify a default text for this text field. This is optional, that is you can construct a prompt() without specifing the default text. In such cases, JavaScript displays an ugly "undefined" value in the text field. The information submitted by the visitor from prompt() can be stored in a variable, just as we had stored the value returned by confirm(). var name = prompt("What is your name", "Type you name here"); Once we have the value, we can write a customized greeting using document.write() as I have done or display an alert box. var name = prompt("What is your name", "Type you name here"); alert("Hi " + name + "\nHope you are enjoying JavaScript!"); Click here to test the code. It's important to remember that the value returned by prompt() and subsequently stored in a variable will always be a string data type. This is fine if you are dealing with text, but might present problems to the code if you plan to receive numeric data through prompt(). Javascript provides two functions to convert this string value to a numeric data type; parseInt() and parseFloat(). The parseInt() converts a string to an integer value while parseFloat() parses the string converting it to a floating point number. Note: An integer is a whole number without any fractional part while floating-point numbers have a decimal part. Now let's write a small script that takes a number from the visitor, checks whether its odd or even and displays the result through an alert box. var n = prompt("Check your number", "Type your number here"); n = parseInt(n); if (n == 0)    {    alert("The number is zero");    } else if (n%2)    {    alert("The number is odd");    } else    {    alert("The number is even");    } Click here to test the code When parseInt() or parseFloat() encounter alphabet or any non-digit character, parsing (conversion) stops and the functions return NaN, which means Not a Number. The only way to test for NaN is to use isNaN() function. We can make the code above more user-friendly by introducing one more if statement that checks for valid input. var n = prompt("Check your number", "Type your number here"); n = parseInt(n); if (isNaN(n))    {    alert("The input cannot be parsed to a number");    } else    {    if (n == 0)       {       alert("The number is zero");       }    else if (n%2)       {       alert("The number is odd");       }    else       {       alert("The number is even");       }    } Click here to test the code. Assignments    1. With which object would you associate the prompt() method?    2. Prompt() takes two arguments. Where are they displayed?    3. The input from a prompt() is of which data type?    4. What is the function of parseFloat() and parseInt()?    5. What will be result if we send "abcd" through a prompt() input and pass it through parseInt()?    6. What is the use of isNaN()?

如这是测试页面：

<HTML> <HEAD> <TITLE>JavaScript</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- //--> var name = prompt("What is your name", "Type you name here"); alert("Hi " + name + "\nHope you are enjoying JavaScript!"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

在javascript进行数据有效性的验证：

http://www.codeave.com/javascript/code.asp?u_log=100

Create JavaScript Input Text Validation Fields Limit the amount of traffic and empty form fields submitted to your site by stopping blank user input before it leaves the client. Server side form validation isn’t always the best answer. Whenever possible it is best to eliminate as much unwanted input as possible. The following script writer aids in that goal. Simply enter the number of text input fields that you need to ensure are not containing blank information, the names of the elements and copy the output code into your document. (Note: Blanks will be converted to the underscore and the use of special characters or numerics as field names will mess up your resultant output)

示例代码：

<html> <body> <script Language="JavaScript"> <!-- function Blank_TextField_Validator(form) { if (form.password.value == "") { alert("Please fill in the password field."); form.password.focus(); return (false); } return (true); } //--> </script> <form method="post" action="where_ever_you_want.htm"  onsubmit="return Blank_TextField_Validator(this)"> <p> password <br> <input type="text" name="password" > <br> <input type="submit" value="Submit"> </form> </body>

转自：http://www.blogjava.net/weidy/archive/2006/06/01/49766.html，标题有改变。

  用了四五年的Table排版，没觉得有什么不好，这一段时间迷上了Dojo,才发现如今已经到了不用DIV不行的年代。还是赶紧跟上潮流，把Table换成DIV吧! 改了几个页面，发现比想象的简单，更是尝到了用div的甜头。share自己一点浅浅的经验：

1. 先上网搜一下找点前人经验。推荐两篇好文：

  http://www.glish.com/css/                         "CSS Layout Techniques: for Fun and Profit"

  http://www.alistapart.com/articles/practicalcss   "Practical CSS Layout Tips, Tricks, & Techniques"   

2. 随便找几个用DIV+CSS实现，结构又比较简单的网站，研究一下它的页面结构和CSS。比如我就是主要看了下面几个网站：

      CSS禅花园          http://csszengarden.com/      

      Eclipse.org        http://www.eclipse.org/

      mozilla.com        http://www.mozilla.com/

作为世界上CSS高手比武的擂台，CSS禅花园的模板实在多的恐怖，以前都只站在欣赏的角度不觉得，自己研究起来，也就只能是挑了一两个看看，再感慨了一番作者真是好创意好美工。有趣的是Eclipse.org的首页居然基本用的都是mozilla.com的CSS，对比着这两个网站看更能看出端倪。

3.  自己上手干吧，让你的页面内容和显示样式彻底分离，其实并不难。

在本站，[url=http://blog.matrix.org.cn/page/littlebat?entry=%E5%AD%A6%E4%B9%A0%E6%97%A5%E8%AE%B0%E7%9A%84%E7%A7%81%E4%BA%BA%E7%9B%AE%E6%A0%87_%E6%97%A5%E8%AE%B0%E6%94%AF%E6%8C%81%E5%8A%9F%E8%83%BD%E8%BF%9B%E5%85%A5%E6%9C%89%E5%A5%96%E5%85%AC%E5%BC%80%E6%B5%8B%E8%AF%95]matrix的blog[/url]，[url=http://blog.javaresearch.org/page/batbat/20060530#%E5%AD%A6%E4%B9%A0%E6%97%A5%E8%AE%B0%E7%9A%84%E7%A7%81%E4%BA%BA%E7%9B%AE%E6%A0%87_%E6%97%A5%E8%AE%B0%E6%94%AF%E6%8C%81%E5%8A%9F%E8%83%BD%E8%BF%9B%E5%85%A5%E6%9C%89%E5%A5%96%E5%85%AC%E5%BC%80%E6%B5%8B%E8%AF%95]javaresearch的blog[/url]，cn-java论坛上发了公告。

  因为，本站的rss订阅是从数据库中动态生成，所以每一次rss订阅都需要查询数据库。

  昨天，从log中看出，首页的rss链接因为被搜索引擎频繁访问，致使网站可能超过半数的资源浪费了。为此，保留rss2.0链接，并把每个目标的rss链接移至目标内容页面。

  今天，从log中可知这种浪费现象消失了一大半，但是，google的搜索引擎仍在访问老的rss1.0和atom0.3的链接，估计它是从自己的历史数据库中访问的。

  原来的rss1.0和atom0.3仍然有效，只不过从网页取消了而已。

  投放google广告也有近3个月了，总共实际投放时间可能10天左右，报告如下 ：

网页展示次数  点击次数  网页点击率  网页 eCPM [?]  收入 AdSense for content 944 0 0.00% USD0.00 USD0.00 查看所有 AdSense for content 渠道 »   查询 点击次数 CTR eCPM [?] 收入 AdSense for search 37 0 0.00% USD0.00 USD0.00 查看所有 AdSense for search 渠道 »   点击次数 CTR 注册 转换 [?] 收入 推介 产品 1 2.38% 0 0 USD0.00 Google AdSense 1 2.38% 0 0 USD0.00 查看所有推介产品 »   总收入 USD0.00

  虽然广告展示近1000次也没有1次点击，但是基于理念“不要排斥广告”，我恢复了google的广告投放，为了自己，也为了别人，我想，总有一天，会有第一个点击我们网站的google广告的朋友的。

  但是，我发现google的广告机器人投放的广告大部分是不符合页面的主要内容的。例如：我的页面是"程序员练功场"，它的广告投放却是：

“ Google 提供的广告 文章 英语 瑜珈培训 成功”

  而且，我们的主要内容应该是跟程序，尤其是java相关的，但是不少页面的广告是与英语相关的。

  看来，我需要对页面作一些特别的关键字设计，来引导google正确地投放广告。但是，这种引导有用吗？

  我看了www.43things.com的广告投放，他们征对目标均有准确的广告投放，但是，我初步观察，他们的广告投放可能是人工的，因为：

  1、许多页面没有广告，甚至有的上1000人参加的目标页面也没有广告；

  2、他们在FAQ中说：Want to know more about us?...our ads are provided by Google...

   而且，google的广告投放来自于他们的搜索数据综合计算，也许他们的投放这样的广告更有全面的计算和考虑，可以把广告在正确的页面展示给的用户？因为他们说：由于所展示的广告与用户在您的网站上浏览的内容相关，或与您网站内容所吸引的用户的个性和兴致相符，...，内容我可以控制，但是google说“用户的个性和兴致”这就玄了，也许，让google这样胡乱投放广告实际上是“歪打正着”？

  比如：如上“而且，我们的主要内容应该是跟程序，尤其是java相关的，但是不少页面的广告是与英语相关的。”，也许来我们站的朋友不少对英语感兴趣，因为google根据他们掌握的用户兴趣的资料，所以就投放了英语相关广告？

  听说，google的两个创始人是技术至上论者，而我认为，技术不是万能的，有时人的直觉和智慧才是最好的解决方案，所以，也不要迷信google的选择。

      我们提倡在实践中学习，为着一个你心中的目标，请加入练功场的相应栏目，让我们一起练功，一起进步！