iframe创建智能表单

<input type="submit" value="Submit" />

</td>

<td />

</tr>

</table>

</form>

<iframe src="about:blank" id="hiddenFrame" name="hiddenFrame" />

</body>

</html>

将上面的代码保存为validate_iframe_form.htm页面，并将该页面保存在Web服务器的根目录之下。从本书的代码下载中查找并下载iframe_formvalidator.php文件，并将该文件也保存在相同的目录中。

打开浏览器(非Safari的浏览器)并加载http://localhost/validate_iframe_form.htm页面。你将看到一个如图16-7所示的页面。

输入三个用户名和e-mail地址进行检查。在关闭了最后一个alert对话框之后，单击浏览器的Back按钮几次。你将看到你所输入的几个用户名或e-mail地址的信息将按倒序出现。文本框中的信息并没有发生改变，但是弹出的alert对话框将显示你所输入的用户名和e-mail地址。你也可以单击浏览器的Forward按钮进行测试。

图  16-7

代码解说

在上面的HTML代码中，除了在表单的结束标记<form/>之后添加了一个<iframe/>元素之外，其他的HTML元素都保持不变。所添加的<iframe/>元素如下所示：

<iframe src="about:blank" id="hiddenFrame" name="hiddenFrame" />

该嵌入框架被初始化为一个空白的HTML页面，其name属性和id属性都被设置为hiddenFrame。在后面的代码中，我们将通过name属性，从BOM对象的frames集合中引用这个嵌入框架。接下来，设置该嵌入框架的CSS样式。

#hiddenFrame

{

display: none;

}

该元素规则仅包含了一个样式声明，该样式声明将<iframe/>元素隐藏起来。

注意：

通过CSS的方式来隐藏<iframe/>元素，可以在需要调试服务器端程序时将<iframe/>元素很方便地显示出来。

下面是页面中的JavaScript代码。

function checkUsername()

{

var userValue = document.getElementById("username").value;

if (userValue == "")

{

alert("Please enter a user name to check!");

return;

}

var url = "iframe_formvalidator.php?username=" + userValue;

frames["hiddenFrame"].location = url;

}

对于checkUsername()函数，仅仅做了一点小小的修改：该函数将使用iframe而不是使用XMLHttpReq

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!