zoukankan      html  css  js  c++  java
  • iframe与form中target的简单应用

    先看一个例子

    <!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>
    

      

  • 相关阅读:
    hiho#1445 重复旋律5 求子串数量 后缀自动机
    SPOJ LCS2 后缀自动机
    SPOJ-LCS 后缀自动机
    bzoj 3261 最大异或和 可持久化字典树(01树)
    【洛谷1297】单选错位
    【HAOI2008】木棍分割
    【SDOI2016】排列计数
    【HAOI2008】下落的圆盘
    【HAOI2008】硬币购物
    【洛谷5520】青原樱
  • 原文地址:https://www.cnblogs.com/invincible-hehe/p/3696335.html
Copyright © 2011-2022 走看看