精华内容
下载资源
问答
  • HTML iframe 标签

    2019-09-20 08:43:14
    定义和用法 iframe 元素会创建包含另外一个文档...IFrame 对象代表一个 HTML 的内联框架 在 HTML 文档中 每出现一次,一个 IFrame 对象就会被创建。 属性 frameborder = 1或0 规定是否显示边框 height =pixels 或 % ...

    定义和用法

    • iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
    • 把需要的文本放置在 和 之间,这样就可以应对无法理解 iframe 的浏

      IFrame 对象

    • IFrame 对象代表一个 HTML 的内联框架
    • 在 HTML 文档中 每出现一次,一个 IFrame 对象就会被创建。
    • 属性

    • frameborder = 1或0 规定是否显示边框
    • height =pixels 或 % 规定iframe的高度
    • width = pixels 或 % 规定iframe的宽度
    • src =URL 规定在iframe中显示的文档的URL
    • <html>
      	<head>
      		<title>iframe标签</title>
      		<meta charset="utf-8">
      	</head>
      	<body>
      	<iframe
      		src="http://www.baidu.com " 
      		width="100%" 
      		height="300px"
      		frameborder="0"
      		>
      	</iframe>
      	</body>
      </html>
      
      

      在这里插入图片描述

      内联框架

      <html>
      	<head>
      		<title>我的第iframe跳转页面</title>
      		<meta charset="utf-8">
      	</head>
      	<body>
      		<a href="http://www.baidu.com" target="myFrame">百度</a>
      		<a href="http://www.qq.com" target="myFrame">QQ</a>
      		<a href="http://www.sohu.com/" target="myFrame">搜狐</a>
      		<iframe 
      			name="myFrame"
      			width="100%"
      			frameborder="0"
      			height="100%"
      		>
      		</iframe>
      	</body>
      </html>
      

      在这里插入图片描述

      [学习链接](https://www.w3school.com.cn/jsref/dom_obj_iframe.asp)

    展开全文
  • html iframe 元素之间的调用

    千次阅读 2017-05-03 16:00:21
    html iframe 元素之间的调用 一、简介  一般需要引入一个独立页面的时候,我们会使用iframe。在业务需要的时候,我们需要在父页面与iframe页面之间进行交互。交互的时候,我们就需要使 用到js或jquery对父页面或...

    html iframe 元素之间的调用
    一、简介
      一般需要引入一个独立页面的时候,我们会使用iframe。在业务需要的时候,我们需要在父页面与iframe页面之间进行交互。交互的时候,我们就需要使
    用到js或jquery对父页面或子页面中的相关元素进操作。
    二、示例
      1、页面结构如下:

      父页面:

    复制代码
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     5         <title>父页面</title>
     6     <script  type="text/javascript"   src="jquery-1.8.3.min.js"></script>
     7     </head> 
     8     <body> 
     9         <input id="username" name="username" value="zhangsan" />
    10         <button onclick="getIframeEle();">change iframe1 from js</button>
    11         <button onclick="getIframeEle2();">change iframe1 from jquery</button>
    12         </br>
    13         <iframe id="t_sub" name="myFrame"  src="./sub.html"> </iframe> 
    14         <iframe id="t_sub2" name="myFrame2"  src="./sub2.html"> </iframe> 
    15     <script type="text/javascript">
    16     function getIframeEle(){ //通过js父页面操作子页面中的元素
    17         var childdoc = document.getElementById("t_sub").contentWindow.document;
    18         var childele = childdoc.getElementById("tname");
    19         childele.value = "chang from parent" + new Date();
    20         console.log(childele.value);  
    21     }
    22     function getIframeEle2(){//通过jquery父页面操作子页面中的元素
    23         //console.log($(document.frames("t_sub").document)); 
    24         var childele = $(document.getElementById('t_sub').contentWindow.document).find("#tname");
    25         childele.val("jquery iframe");
    26         console.log(childele.val());
    27     }
    28 
    29 
    30     // 计算页面的实际高度,iframe自适应会用到
    31   function calcPageHeight(doc) {
    32       var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
    33       var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
    34       var height  = Math.max(cHeight, sHeight)
    35       return height
    36   }
    37   var ifr = document.getElementById('t_sub2')
    38   ifr.onload = function() {
    39       var iDoc = ifr.contentDocument || ifr.document
    40       var height = calcPageHeight(iDoc)
    41       ifr.style.height = height + 'px'
    42   }
    43     </script>
    44     </body>
    45 </html>
    复制代码

      子页面一

    复制代码
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     5         <title>子页面一</title> 
     6     <script  type="text/javascript"   src="jquery-1.8.3.min.js"></script>
     7     </head> 
     8     <body> 
     9         <input id="tname" value="test" />
    10         <button onclick="getParentEle();">change parent from js</button>
    11         <button onclick="getBrothertEle2();">change brother iframe from js</button>
    12         <button onclick="getParentEle2();">change parent iframe from jquery</button>
    13 <script type="text/javascript">
    14 <!--
    15 function getParentEle(){//通过js获取并操作父页面的元素
    16     var par_input =    parent.document.getElementById("username");
    17     par_input.value = "change from iframe" + new Date();
    18     console.log(par_input.value)
    19 }    
    20 function getParentEle2(){//通过jquery获取并操作父页面中的元素
    21     var usernameELe = $('#username', parent.document);
    22     usernameELe.val("change from child iframe ");
    23     console.log(usernameELe.val());
    24 }
    25 function getBrothertEle2(){//通过js获取并操作兄弟iframe中的元素
    26     var parentDOM = parent.document.getElementById("t_sub2").contentWindow.document;;
    27     var borele = parentDOM.getElementById('tname2');
    28     borele.value = "change from brother iframe" + new Date();
    29     console.log(borele.value)
    30 }
    31 //-->
    32 </script>
    33     </body>
    34 </html>
    复制代码

      子页面二

    复制代码
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     5         <title>子页面二</title> 
     6     </head> 
     7     <body> 
     8         <input id="tname2" value="test22" /> 
     9         <a href="javascript:void(0);" onclick="test(this);" >test</a>
    10         <br/><br/><br/><br/><br/><br/><br/> 
    11     <script type="text/javascript">
    12     function test(this_){
    13         window.parent.location.href="http://www.baidu.com";
    14     }
    15     </script>        
    16     </body>
    17 </html>
    复制代码

      页面效果如下图所示:

      

    展开全文
  • 原文:利用代理页面解决html iframe跨域访问网站问题 源代码下载地址:http://www.zuidaima.com/share/1854884509142016.htm 在做项目的时候遇到跨域问题,经过自己的一番摸索终于找到一种解决iframe...

    原文:利用代理页面解决html iframe跨域访问网站问题


    在做项目的时候遇到跨域问题,经过自己的一番摸索终于找到一种解决iframe跨域问题的方案,或许很多人也会遇到这样头疼的问题,希望能尽自己绵薄之力帮助大家。如果不清楚或者有问题的可以留言和私信我,谢谢。

    【问题描述】

        在项目中由于许多页面都是连接到其他项目的页面。由菜单连接到其他域页面,再在其他域页面上调用本项目的js用iframe显示其他域的页面,这样就会涉及到安全性问题即跨域问题。报错信息如下

    浏览器控制台跨域报错信息:Unsafe JavaScript attempt to access frame with URL xxx from frame with URL xxx Domains, protocols and ports must match.

    【分析思路】

        要想解决问题就必须得还原问题本身,那就是重现问题。对于这个问题我就单独写了两个项目来进行模拟测试,并使用iframe来嵌套调用两个项目的页面,把这两个项目分别放在两个不同端口的tomcat下。由于端口不同所以浏览器就会抛出安全异常即跨域问题。

        成功的重现问题后,接下来就是根据错误信息在网上搜寻答案。根据网上给的答案大多数都是设置页面document.domain为同一域,这个方法倒是能解决,但是需要所有页面都这样设置,但在实际项目中往往会有很多页面而无法每个页面都设置,逐放弃之。后来几经琢磨想到了利用代理页面,就好像访问本项目页面一样,再结合之前弄打印页面采用自动创建iframe来加载别的页面(即中间页面/代理页面),结果通过这种方式还真有效。

    【具体解决方法】

         把site1和site2项目分别放在不同端口的tomcat下运行,访问site1的index.html页面,这是入口页面。在site1的index.html页面中用iframe访问显示site2的index.html页面,再通过操作site2的index.html页面调用site1的index.html页面中的方法excute,要调用此方法就要利用到中间代理页面site1中的iframe.html,这个是一个关键页面,因为所有需要跨域的访问都要通过这个页面来调用site1项目中的代码。这样就形成了自己调用自己的代码也就不会出现跨域了。在这个执行过程中site2的index.html页面中的crossFrame方法起到了关键作用,就是通过它来调用代理页面的。

    项目截图

    Site1/index.html

    Site2/index.html

    Site1/iframe.html

     

    访问site1/index.html

    运行截图:

    参考资料:

    什么是跨域

    我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.

    跨域问题是由于javascript语言安全限制中的同源策略造成的.

    简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

    例如:

    URL说明是否允许通信
    http://www.a.com/a.js 
    http://www.a.com/b.js
    同一域名下允许
    http://www.a.com/lab/a.js 
    http://www.a.com/script/b.js
    同一域名下不同文件夹允许
    http://www.a.com:8000/a.js 
    http://www.a.com/b.js
    同一域名,不同端口不允许
    http://www.a.com/a.js 
    https://www.a.com/b.js
    同一域名,不同协议不允许
    http://www.a.com/a.js 
    http://70.32.92.74/b.js
    域名和域名对应ip不允许
    http://www.a.com/a.js 
    http://script.a.com/b.js
    主域相同,子域不同不允许
    http://www.a.com/a.js 
    http://a.com/b.js
    同一域名,不同二级域名(同上)不允许(cookie这种情况下也不允许访问)
    http://www.zuidaima.com/a.js 
    http://www.a.com/b.js
    不同域名不允许
    展开全文
  • html iframe内页面跳转

    2017-06-25 12:26:36
    问题:如图,点击张三我希望更改iframe地址,实现跳转功能,我尝试过获取使用(window.parent.document.getElementById("content-iframe").src)这样是不行的,还有没有其他方法呢,请教大家,小弟谢过了
  • 想要取得iframe中的元素和js变量值,不能用$(document).ready()方法,而是要用$("#iframeId").load()方法
  • html iframe示例

    千次阅读 2009-06-25 14:05:00
    iframe示例使用iframe:

    展开全文
  • HTML iframe 和 frameset 的区别

    千次阅读 2018-08-01 15:03:30
    iframe 和 frameset 都用于html页面的框架布局。 目录: 1. &lt;iframe&gt; 标签:iframe 是个内联框架,是在页面里生成个内部框架。 2. &lt;fram
  • HTML iframe 标签禁止跳转页面

    千次阅读 2019-11-29 15:39:07
    iframe标签的属性:sandbox,启用一系列对 <...iframe name="son" src="index.html" width="100%" height="100%" scrolling="auto" security="restricted" sandbox="allow-top-navigation allo...
  • html iframe原网页空白

    2015-04-07 11:23:44
    在asp.net的后台执行下面一行代码 ... Response.Write("<iframe src='report.html' />"); ``` 在网页中![图片说明](https://img-ask.csdn.net/upload/201504/07/1428405793_395743.png)原网页空白
  • HTML iframe 实现功能页面动态切换

    千次阅读 2016-09-08 15:36:03
    Iframe .left{ color:#0F0; border: #0F6 1px solid; width:20%; height:300px; float:left; text-align:center; } .right{ color
  • HTML iframe 用法小总结

    千次阅读 2016-07-17 14:17:24
    iframe是框架的一种形式,也比较常用到,下面是对其在平时常用到属性的总结 Iframe用法,下面是一个常规的列子 其中: iframe用于设置文本或图形的浮动图文框或容器。  border设定围绕图文框的边缘宽度   其中...
  • Android WebView 获取html iframe内部链接

    千次阅读 2017-03-30 16:56:43
    Android 中当我们在使用WebView加载html页面时,html中可能会嵌套iframe,这时候iframe里面的请求Android通过 shouldOverrideUrlLoading是无法拦截的,需要shouldInterceptRequest才可以拦截到。但是...
  • html iframe 页面传值

    千次阅读 2012-12-18 17:21:52
    【解决】JS实现Iframe与父页面“函数互调/参数互传” 问题是这样的:在iframe中使用了一个弹出层插件,但弹出层仅限于在iframe页面,无法弹出到父页面。 于是乎问题就产生了:  1、如何在iframe页面调用父...
  • HTML iframe 标签的 src 属性

    千次阅读 2019-01-16 15:42:24
    http://www.w3school.com.cn/tags/att_iframe_src.asp   $(document.body).after(frame); document.body 返回当前文档中的&lt;body&gt;元素或者&lt;frameset&gt;元素. 其实也就是body对象...
  • HTML iframe 用法总结收藏

    千次阅读 2015-11-25 09:38:32
    Iframe用法精析 用于设置文本或图形的浮动图文框或容器。 BORDER 设定围绕图文框的边缘宽度 FRAMEBODER 设置边框是不否为3维(0=否,1=是) HEIGHT,WIDTH 设质边框的宽度和高度 ...
  • demo.html:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&...
  • HTML iframe标签以及其高度问题

    千次阅读 2019-03-03 16:50:40
    iframe基本概念 ...demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin"&gt;&lt;/iframe&
  • 简单的说,就是从framework 4.5版本开始,变成了HtmlIframe类, 4.5版本之前,是HtmlGenericControl类。 web.config里有个targetFramework属性,要是4.5,就把iframe编译成HtmlIframe, 要是4.0,就给编译成...
  • 很多时候html中会嵌套iframe,这时候iframe里面的请求android通过shouldOverrideUrlLoading是无法拦截的,需要shouldInterceptRequest才可以拦截到。 但是shouldInterceptRequest会将所有请求拦截,比如.js\.css...
  • html iframe 子页面调用父页面的方法

    万次阅读 2018-03-16 10:41:22
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;parents&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;/head&gt; &lt;body&...
  • 从Framework 2.0-3.5 升级到Framework 4.5时遇到 Iframe 转换为服务器控件遇到... but its type (System.Web.UI.HtmlControls.HtmlIframe) is not compatible with the type of control (System.Web.UI.HtmlControls.H
  • HTMl iframe框架退出到登录页面

    千次阅读 2009-10-11 15:38:00
    现在一般的 后台都使用 iframe   再退出的时候 总是只有一部分到了退出页面   解决方法 很简单 Response.Write("parent.location.href='http://www.baidu.com'")//整个页面全部显示百度
  • Ext.Window html iframe 关闭父窗口

    千次阅读 2011-08-23 14:48:47
     html : "<iframe id='id1' src='http://...importxls.jsp?userid="+user.id+"' width='100%' height='100%' scrolling='no' frameborder='0'></iframe>"  });  win_import.show();   后台处理: ...
  • 添加 iframe 的语法 URL"> URL 指向隔离页面的位置。 Iframe - 设置高度和宽度 height 和 width 属性用于规定 iframe 的高度和宽度。 属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。 ...
  • DOCTYPE html> <html> <head> <title>parents</title> <meta charset="UTF-8"> </head> <body> <script language="javascript" type="text/...
  • HTML代码:  复制代码 代码如下: <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>...
  • iframe语法 //属性 //src="URL" //链接的网页 //width="200" //设置宽 //height="00" //设置高 //frameborder="0" //去除边框 设置属性值为 "0" 移除iframe的边框 //scrolling="no" //去除滚动条 在窗口框架体系中,...
  • htmliframe调用兄弟iframe中的js方法

    千次阅读 2018-01-26 18:33:03
    最近工作中碰到一个页面有一个主iframe A,用于操作主要业务元素。其中有一个弹出框里面也嵌入了一个iframe B, 此时,我需要在B中调用A中JS的指定方法。下面咱们来通过例子还原一下这个场景,看如何实现的。 ...
  • htmliframe用法解析

    千次阅读 2012-02-23 19:07:04
    Iframe用法精析 用于设置文本或图形的浮动图文框或容器。 BORDER 设定围绕图文框的边缘宽度 FRAMEBODER 设置边框是不否为3维(0=否,1=是) HEIGHT,WIDTH 设质边框的宽度和...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 152,860
精华内容 61,144
关键字:

htmliframe