先看一个例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<form name="form1">
<div>
<iframe name="query" src="test2.html"></iframe>
</div>
<div id="newIframe">
<iframe name="theID"></iframe>
</div>
</form>
<form name="jumpform" target="theID" action="test2.html">
<input type="submit" value="提交" />
</form>
</body>
</html>
子页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
BEN Hello!
</body>
</html>
name是theID的iframe中显示了。
target属性:
_blank——新开窗口
_self——自身
_top——主框架
_parent——父框架
自定义名字——出现于框架结构,将会在该名称的框架内打开链接
很多时候需要动态创建iframe
但是在IE下,通过JS创建一个iframe object,对其name属性的赋值操作将被忽略。
解决办法:在IE和其他browser下可以通过以下方式创建iframe。
var iframe;
try { // for I.E.
iframe = document.createElement('<iframe name="fileUploaderEmptyHole">');
} catch (ex) { //for other browsers, an exception will be thrown
iframe = document.createElement('iframe');
}
实例2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
<script type="text/javascript">
window.onload = function(){
var obj = null;
try{
obj = document.createElement('<iframe name="theID">');
}catch(ex){
obj = document.createElement('iframe');
obj.name = 'theID';
}
var oDiv = document.getElementById('newIframe');
oDiv.appendChild(obj);
}
</script>
</head>
<body>
<form name="form1">
<div>
<iframe name="query" src="test2.html"></iframe>
</div>
<div id="newIframe">
</div>
</form>
<form name="jumpform" target="theID" action="test2.html">
<input type="submit" value="提交" />
</form>
</body>
</html>