a标签的target指向iframe的name和id的区别

本文探讨了HTML中a标签的target属性设置为iframe的name属性而非id属性的原因。当使用name作为目标时,大多数浏览器都能正常工作;而使用id作为目标则只在新版Chrome和Opera中有效,在IE10和Firefox等浏览器中该行为不被支持。

a标签的target指向iframe的name和id的区别

作者:佚名 字体:[增加 减小] 来源:互联网 时间:10-24 16:47:56 我要评论

个a标签的target指向的是name为myFrameName的iframe,不适宜用Id来做指向的目标,一个小细节,花了不少时间,有类似问题的朋友可以参考下
width="300" height="250" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" id="aswift_0" name="aswift_0" style="display: block; left: 0px; position: absolute; top: 0px;">
id="iframeu811641_0" src="http://pos.baidu.com/dcdm?rdid=811641&dc=2&di=u811641&dri=0&dis=0&dai=2&ps=0x0&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1468909573871&ti=a%E6%A0%87%E7%AD%BE%E7%9A%84target%E6%8C%87%E5%90%91iframe%E7%9A%84name%E5%92%8Cid%E7%9A%84%E5%8C%BA%E5%88%AB_HTML%2FXhtml_%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&ari=2&dbv=2&drs=1&pcs=1424x776&pss=1424x1890&cfv=0&cpl=4&chi=1&cce=true&cec=GBK&tlm=1466358486&rw=776&ltu=http%3A%2F%2Fwww.jb51.net%2Fweb%2F112652.html&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DRZqSBKStlB-TLTPWcej-CEYE88RxB-1ufscIAwvxJLSE4-kYkEY67uWP6hOXBtHa%26wd%3D%26eqid%3D85f90606000adde600000005578dc7ff&ecd=1&psr=1920x1080&par=1920x1040&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1468909574&qn=34ed69f7a836fa78&tt=1468909573855.65.142.143" width="300" height="250" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

复制代码
代码如下:

<iframe id="myFrameId" name="myFrameName" scrolling="no" frameborder="0" style="width:200px; height:150px; "></iframe> 
<a href="../ashx/Print2DCodeImage.ashx?codeInfo=Demo123" target="myFrameName" >打印二维码</a> 

上面的这个a标签的target指向的是name为myFrameName的iframe,不适宜用Id来做指向的目标,如果target=“myFrameId”的话只有新版的Chrome、opera支持,在IE10,FF中都不生效。 

一个小细节,花了不少时间。
### 关于 `iframe` 的 `name` 属性 在 HTML 中,`<iframe>` 标签的 `name` 属性定义了一个框架的名字。这个名称可以被其他元素(比如链接或者表单)用来指定目标窗口或框架[^2]。 #### 设置获取 iframe 名称 当创建 `<iframe>` 时,可以通过设置其 `name` 属性来赋予特定名字: ```html <iframe src="demo_iframe.htm" name="exampleFrame"></iframe> ``` 此代码片段展示了如何给一个 iframe 赋予名为 "exampleFrame" 的名称。一旦设置了这个名字,在同一文档内的超链接就可以通过 target 属性指向iframe: ```html <a href="anotherPage.html" target="exampleFrame">Link Text</a> ``` 这会使得点击链接后的内容加载到具有相同名称的目标 iframe 内部而不是新开浏览器标签页或其他位置。 对于 JavaScript 访问带有特定名称的 iframe, 可以采用如下方式之一: - **方法一**: 使用 getElementById 获取 DOM 对象并进一步操作 contentWindow 或者 contentDocument 来访问其中的内容。 ```javascript var x = document.getElementById("myframe"); var y = (x.contentWindow || x.contentDocument); if (y.document) { y = y.document; } // Now you can manipulate the inner document of 'myframe' ``` - **方法二**: 利用 window.frames 数组按索引查找 iframe 实例,这里的键既可以是 iframename 值也可是它们按照出现顺序排列的位置编号。 ```javascript window.frames["iframeNameOrIndex"] ``` 这两种技术都允许开发者与嵌入式页面交互以及控制其行为[^1]。 #### 表单提交至指定 iframe 除了作为导航链接的目的地之外,`<iframe>` 还能成为 `<form>` 提交数据后的显示容器。只需简单地将 form 元素的 `target` 属性设为相应 iframe 的 `name` 即可实现这一点: ```html <form action="/submitForm.php" method="post" target="resultFrame"> <!-- Form fields go here --> <button type="submit">Submit to iFrame</button> </form> <iframe name="resultFrame" id="resultFrame"></iframe> ``` 上述例子说明了怎样配置一个简单的 HTML 表单使其结果展示在一个叫作 resultFrame 的 iframe 当中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值