精华内容
下载资源
问答
  • 网页iframe框架常见的应用例子
    2022-02-22 09:30:12

    iframe语法:

    <iframe src="URL"></iframe>

    该URL指向不同的网页。


    iframe - 设置高度与宽度

    height 和 width 属性用来定义iframe标签的高度与宽度。

    属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")。

    实例

    <iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>


    iframe - 移除边框

    frameborder 属性用于定义iframe表示是否显示边框。

    设置属性值为 "0" 移除iframe的边框:

    实例

    <iframe src="demo_iframe.htm" frameborder="0"></iframe>

     

     [ 视频播放器 ] 相关文章

    [ WebRTC ] 相关文章

    [ 谷歌浏览器 ] 相关文章

    [ 微信公众号运营 ] 相关文章

     

    更多相关内容
  • Iframe实例

    2017-09-13 14:01:27
     在脚本语言与对象层次中,包含Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这两者的关系很重要,因为要在父窗体中访问子窗体或相反都必须清楚对象层次,才能通过程序来访问并控制窗体。
  • IFrame简单例子

    2017-05-26 08:26:24
    IFrame
  • iframe实例

    2018-01-20 13:55:00
    引言:平时开发工作中,我们常需要将其他的网站的内容,添加到自己的网站中,例如本例在线客服,我们就需要应用到iframe框架。 <!DOCTYPE html> , initial-scale=1.0"> <title>Document 在线咨询 ...

    引言:平时开发工作中,我们常需要将其他的网站的内容,添加到自己的网站中,例如本例在线客服,我们就需要应用到iframe框架。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    </head>
    <body>
    	<div id="onlineconsult" class="page-container">
            <header class="header">在线咨询</header>
            <div class="iframeContainer">
                <iframe width="100%" height="100%" style="border:0;" src="http://www.baidu.com" frameborder="0">
                </iframe>
            </div>
        </div>
    </body>
    </html>
    <style>
    body {
    	margin:0;
    	padding:0;
    }
    .header {
    	height: 46px;
    	text-align: center;
    	line-height: 46px;
    }
    .iframeContainer{
    	width: 100%; 
    	position: absolute; 
    	left: 0; 
    	top: 46px; 
    	bottom: 0; 
    	right: 0;
    }
    </style>
    

    结果:输入图片说明

    转载于:https://my.oschina.net/shuaihong/blog/1610007

    展开全文
  • iframe例子

    千次阅读 2018-05-16 23:13:53
    iframe例子 转载▼test1.htm&lt;html&gt; &lt;body background="test.jpg" &gt; &lt;iframe src="test2.htm" id="tag" name="tag" ...

    iframe例子

     

    test1.htm

    <html>
        <body background="test.jpg" >
            <iframe src="test2.htm" id="tag" name="tag" allowTransparency="true" width="250"   height="200" scrolling="no" frameborder="0">
            </iframe>

            <iframe src="test3.htm" id="test3" allowTransparency="true" width="450" height="200" scrolling="no" frameborder="0">
            </iframe>

        </body>
    </html>

     

    test2.htm

    <html> 
       <body style="BACKGROUND-COLOR:transparent;"> 
              <table width="50" height="20">
             <tr><td>1</td></tr>
                 <tr><td>2</td></tr>
              </table>
       </body> 
    </html> 

     

    test3.htm

    <html> 
       <body style="BACKGROUND-COLOR:transparent;"> 
              <table width="50" height="20">
              <tr><td>test1</td></tr>
                  <tr><td>test2</td></tr>
              </table>
       </body> 
    </html> 

     

    iframe属性
     

    SRC=URI 嵌入式柜架的页面文件路径
    NAME=CDATA 嵌入式柜架的名字 
    LONGDESC=URI 描述
    WIDTH=Length 宽度
    HEIGHT=Length 高度
    ALIGN=[ top | middle | bottom | left | right ] 


    对齐方式
    FRAMEBORDER=[ 1 | 0 ] 柜架边框 
    MARGINWIDTH=Pixels 左右空出宽度 
    MARGINHEIGHT=Pixels 上下空出的高度 
    SCROLLING=[ yes | no | auto ] 流动条(yes强制显示|no永不显示|auto自动)

     

    iframe 透明

    allowTransparency="true"

    style="BACKGROUND-COLOR:transparent;"

     

     
    Iframe标记的使用格式是:
    <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></iframe>
    src:文件的路径,既可是HTML文件,也可以是文本、ASP等;
    width、height:"内部框架"区域的宽与高;
    scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为 Auto:则自动出现滚动条;如为Yes,则显示;
    FrameBorder:区域边框的宽度,为了让“内部框架“与邻近的内容相融合,常设置为0。
    name:框架的名字,用来进行识别。
    展开全文
  • 本文实例讲述了PHP ajax跨子域的解决方案之document.domain+iframe。分享给大家供大家参考,具体如下: 对于主域相同,子域不同,我们可以设置相同的document.domain来欺骗浏览器,达到跨子域的效果。 例如:我们有...
  • iframe简单使用实例

    千次阅读 2018-12-07 16:12:03
    iframe元素会创建包含另外一个文档的内联框架(即行内框架)。 iframe 的优缺点 优点:  重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少数据的传输,减少网页的加载时间);  技术简单,...

    IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

    iframe 的优缺点

    优点:

      重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少数据的传输,减少网页的加载时间);

      技术简单,使用方便,主要应用于不需要搜索引擎来搜索的页面;

      方便开发,减少代码的重复率(比如页面的header,footer);

    缺点:

      会产生很多的页面,不易于管理;

      不易打印;

      多框架的页面会增加服务气得http请求;

      浏览器的后退按钮无效等;

      由于诸多的缺点,不符合标准网页设计的理念,已经被抛弃,目前的HTML5不再支持此标签

    有时,我们需要在一个测试页面;把输入和输出参数都打印出来。而不需要跳转到另外一个页面的时候。iframe在这个时候就显得尤为重要了。

    且看以下例子:

    index.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>****交易接口测试页面</title>
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	<!--
    	<link rel="stylesheet" type="text/css" href="styles.css">
    	-->
    	<script type="text/javascript">
    	function selectInterface_test() {
    		document.getElementById("input").src=document.getElementById("interfaces").value;
    	}
    	</script>
      </head>
      <body>
      <p style="text-align:center">
      <select id="interfaces" name="interfaces" onchange="selectInterface_test()">
      	<option>------测试环境选择接口-------</option>
      	<option value="payCreate.jsp">统一下单支付接口</option>
      	<option value="wechatH5.jsp">微信H5支付接口</option>
      	<option value="wechatJsApi.jsp">微信JS支付接口</option>
      	<option value="aliJsApi.jsp">支付宝服务窗支付接口</option>
      	<option value="mainScanning.jsp">主扫支付接口</option>
      	<option value="scanning.jsp">被扫支付接口</option>
      	<option value="splitOrder.jsp">分账接口</option>
      	<option value="unionPay.jsp">网银支付接口</option>
      	<option value="withdrawalToCard.jsp">单笔代付接口</option>
      	<option value="queryCreate.jsp">订单查询接口</option>
      	<option value="refundCreate.jsp">退款接口</option>
      	<option value="refundQueryCreate.jsp">退款交易查询接口</option>
      	<!-- <option value="repealCreate.jsp">订单撤销接口</option> -->
      </select>
      </p>
      <p style="text-align:center">
      选择接口
      ---------------------------------------------------我是分割线---------------------------------------------------
     参数打印
      <br>
      </p>
      <iframe style="width:48%;height:90%" name="input" id="input"></iframe>
      <iframe style="width:48%;height:90%" name="output" id="output"></iframe>
      
      </body>
    </html>
    

    这里的关键点在:

      <iframe style="width:48%;height:90%" name="input" id="input"></iframe>
      <iframe style="width:48%;height:90%" name="output" id="output"></iframe>

    以及

        <script type="text/javascript">
        function selectInterface_test() {
            document.getElementById("input").src=document.getElementById("interfaces").value;
        }
        </script>

    在<select>的<option>里面选中选项后,通过js函数获取对应第一个<iframe>中input得到的标签id属性值,然后再在<option>相应子页面target="output"到第二个<iframe>中。

    其中某个子页面:

    <option value="payCreate.jsp">统一下单支付接口</option>

    ....
    <body>
    <form name="frmPost" action="/***-test/**Action" target="output" method="post">
    </body>

    这样,当***Action后台service处理完后,返回信息直接output输出到第二个<iframe>中。

    整个输入输出参数在一个页面呈现,实现效果如下:

    一个页面呈现

    当有需要在一个页面调试,看到完整输入输出参数的情况时,用iframe非常合适。

     

    同名原创公众号: 程序大视界

     

    展开全文
  • NULL 博文链接:https://justcoding.iteye.com/blog/1374728
  • iframe使用实例

    热门讨论 2011-08-09 16:02:13
    iframe使用实例,简单名了,演示iframe的基本功能
  • frameset/frame/iframe实例演示

    热门讨论 2012-08-01 22:25:16
    里面包含了frameset,frame以及iframe的一些技术的演练,希望对大家有帮助,如果有什么补充或疑问,可以加QQ374053115进行和我讨论交流,互相进步!里面代码均手写,大致功能都已经实现,如果错误欢迎指出!
  • 本篇主要是对JS操作iframe里的dom进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • 代码来源于我近期的一个项目,点击树形菜单右侧iframe链接的pdf出现变换
  • 下面小编就为大家带来一篇js 监控iframe URL的变化实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮$(window.frames[“iframe1”].document).find(”input[@type=’radio’]“)....
  • iframe父向子传值实例完美解决跨域问题,遇到此问题的小伙伴快下载解决问题吧! gogogogogo!
  • A网页为一个专门设计的登录页面login.html,通过iframe嵌套在B页面中index.html,登录后会进入后台C页面consule.html.问题来了,登录成功后,通过Django-url跳转,页面一直在iframe里面,没有跳出嵌入的框架中。...
  • 主要介绍了iframe高度自适应及隐藏滚动条的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 内容索引:脚本资源,HTML,框架传值 iFrame 框架在多页面间相互传值的实例,这个例子我觉得很实用,相信有不少朋友都遇到过,在嵌套页面与被嵌页面间传值,是个棘手问题,曾经也让我束手无策,现在好了,这个实例可帮...
  • 今天小编就为大家分享一篇layui type2 通过url给iframe子页面传值的例子,具有的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • JQUERY IFRAME下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS与可以实现。 第一、在iframe中查找父页面元素的方法:$(‘#id’, window.parent.document) 第二、在父页面中获取iframe中的元素方法:$(this)...
  • jQuery动态选项卡,包括Tabs中iframe的使用等实例。 适用于jquery的TabControl类动态创建选项卡【标签】,实例中用TabControl类创建了两人个实用的TAB,并加注了丰富的注释,这里要注意一下,第2个tab测试两个之间的...
  • iframe子向父传值实例完美解决跨域问题,遇到此问题的小伙伴快下载解决问题吧! gogogogogo!
  • 1. 页面上传图片的部分放到一个iframe中,iframe设置无边框无滚动条,和所嵌入的页面风格一致,根据需要设置固定大小 2. 在iframe中提交上传图片的表单,提交后再次返回原页面(iframe所指向的页面)并从服务器带回刚...
  • 在做HTML页面的时候,经常会遇到“如果当前页面显示在iframe中,我们就相应的...以上这篇html判断当前页面是否在iframe中的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 今天小编就为大家分享一篇layer弹出层 iframe层去掉滚动条的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,164
精华内容 21,665
关键字:

iframe实例

友情链接: RhythmEditor.rar