• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 在iframe框架中打开页面的方法

在iframe框架中打开页面的方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含iframe框架,打开页面等相关知识,佚名 希望在学习及工作中可以帮助到您
解决思路:
只要设置链接的target属性值与目标框架名一样就行了。
具体步骤:
1:对于frameset对象。
(1)包含框架页的代码。

<frameset cols="100,*" name="frame1">
<frame src="1.htm" name="top">
<frame src="2.htm" name="main">
</frameset>

(2)框架加载页(1.htm或2.htm)的链接代码:

<a href="http://www.flash8.net" target="top">在上框中打开链接</a>
<a href="http://www.flash8.net" target="main">在主框中打开链接</a>

2.对于iframe也是一样的用法。

<iframe src="about:blank" name="left"></iframe>
<iframe src="about:blank" name="right"></iframe>
<a href="http://www.flash8.net" target="left">在左框中打开链接</a>
<a href="http://www.thugx.com" target="right">在右框中打开链接</a>

技巧:在用脚本中设置目标框架的location属性值也可以达到同样的目的。如:
<a href="http://www.flash8.net"
onClick="document.frames[’right’].location=this.href;return false">在名为right的框架中打开链接</a>

特别提示
本例代码运行后,单击链接,链接目标将在指定的框架或iframe内打开,图1.6.6为单击链接后链接在指定iframe中打开的效果。

图1.6.6 让链接目标在指定iframe中打开

特别说明

本例主要是链接的target属性和框架的name属性的应用,当两个属性值相同时链接目标在框架中打开。
target 设置或获取目标内容要显示于哪个窗口或框架。
name 设置或获取框架的名称。

您可能想查找下面的文章:

  • 在iframe框架中打开页面的方法

相关文章

  • 2018-08-23AI教程!教你 3 步做出高格调的悖论空间
  • 2017-09-11node的包管理工具:yarn和npm
  • 2018-08-23交互设计中如何求最优解?来看这篇超全面的分析!
  • 2018-08-232017年天猫双11海报全集,为52家品牌创意疯狂打Call!
  • 2018-08-23看似一模一样的搜索框,在设计师眼里有这么多细节!
  • 2017-08-06Unicode签名BOM引发的事故原因分析
  • 2018-08-23进阶学习!关于用户体验你应该知道的8件事
  • 2018-08-23昨晚,我偷偷参加了甲方公司的面试
  • 2018-08-23如何才能做到色彩平衡?网易老司机告诉你!
  • 2018-08-23成功入职谷歌后,说说我是如何通过2次面试并收到 Offer 的

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 想自学插画?9个必备的手绘插画教程神器
    • 优设网投稿规范
    • 创意十足!如何在平面设计中运用双重曝光效果?
    • 这款独特的紫色,是为你指引2018年设计方向的年度潘通色
    • 用一张图阐述一个设计师的思考与成长历程
    • 授人以渔!用一个清晰的思路帮你掌握移动界面标注
    • 学会5WH产品需求分析方法,再也不用熬夜改稿了!(下)
    • 腾讯设计师:超实用的数据可视化零基础教程
    • 眼见不一定为实!设计中常见的 9 种视觉错觉!
    • 系统学习!服务设计的常用理论、流程和方法总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有