iframe

HTML5 postMessage 跨域交换数据

由 帅比萌擦擦* 提交于 2020-03-17 09:21:06
某厂面试归来，发现自己落伍了！>>> 今天我们来学习一下HTML5的api，利用postMessage来跨域交换数据。和前面一些方式交换数据方式不同的是，利用postMessage 不能和服务端交换数据 ， 只能在两个窗口（iframe）之间交换数据 ，废话不多说，我们直接进入实战。 实战postMessage overview 　　上文中说，postMessage是用于两个窗口（iframe）之间交换数据的，如果我们同时打开着百度和谷歌两个页面，是不是说这两者之间就可以通信了？No，no，no，事实并非如此，就算百度和谷歌俩页面有通信的意愿也不行。 两个窗口能通信的前提是，一个窗口以iframe的形式存在于另一个窗口，或者一个窗口是从另一个窗口通过window.open()或者超链接的形式打开的（同样可以用window.opener获取源窗口） ；换句话说，你要交换数据，必须能获取目标窗口(target window)的引用，不然两个窗口之间毫无联系，想通信也无能为力。 　　既然是H5家族的，我们也得观望下它被广大浏览器的接受程度，可以看到接受程度还是相当高的： 　　而postMessage的使用方式也相当简单： otherWindow.postMessage(message, targetOrigin, [transfer]); 　　otherWindow是对接收方窗口的引用

HTML 6 (转）

由 泄露秘密 提交于 2020-03-17 08:30:55
HTML 框架 iframe语法: <iframe src=" URL "></iframe>该URL指向不同的网页。 Iframe - 设置高度与宽度 height 和 width 属性用来定义iframe标签的高度与宽度。 属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。 Iframe - 移除边框 frameborder 属性用于定义iframe表示是否显示边框。 设置属性值为 "0" 移除iframe的边框: 使用iframe来显示目标链接页面 iframe可以显示一个目标链接的页面 目标链接的属性必须使用iframe的属性 HTML 颜色 HTML 颜色由红色、绿色、蓝色混合而成。 颜色值 HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。 种颜色的最小值是0（十六进制：#000）。最大值是255（十六进制：#FFF）。 这个表格给出了由三种颜色混合而成的具体效果： Web安全色? 数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。 我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。 最初

唤醒app

由 六月ゝ 毕业季﹏ 提交于 2020-03-17 06:15:40
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>redirectToNative的demo</title> </head> <body> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <div style="font-size:16px;color:#333"> 如果没有自动下载，请手动<a style="color:red;font-size:20px" href="http://m.etao.com/download.php?src=unsupport">点此下载一淘客户端</a>，安装后用一淘客户端的扫描功能重新扫描二维码即可；</br></br> 如果您不想安装客户端，也可以<a style="color:red;font-size:20px" id="J_gotoH5" href="http://m.etao.com/#item/">直接访问etao触屏版</a>，同样有手机专享价以及优惠券和返利！ </div> <script> /** * @fileoverview * @author miaojing<miaojing

框架、颜色、颜色名、脚本、字符实体、URL、速查列表

由 痴心易碎 提交于 2020-03-17 05:32:38
一、 1.<iframe></iframe>标签设置内联框架（一个内联框架用来当前HTML文档嵌入另一个文档）。【语法：<iframe src=" URL "></iframe>】 2.height和width属性定义iframe标签的高度与宽度。 【示例： < iframe src = " demo_iframe.htm " width = " 200 " height = " 200 " > </ iframe > 】 3.frameborder属性定义iframe是否显示边框（“0”不显示。“1”显示）。 【示例： < iframe src = " demo_iframe.htm " frameborder = " 0 " > </ iframe > 】 二、 1.HTML颜色由十六进制符号定义。【示例：<p style="background-color:#FFFF00">】 2.HTML颜色通过rab值设置。【示例：<p style="background-color:rgb(255,255,0)">】 3.HTML颜色通过颜色名设置。【示例：<p style="background-color:yellow">】 三、 颜色值 四、 1.<script>标签定义客户端脚本，其元素可包含脚本语句、还可通过src属性指向外部脚本文件。 【示例： < script >

Iframe自动适应宽度和高度(both IE and Firefox are ok)

由 吃可爱长大的小学妹 提交于 2020-03-17 01:04:42
只需修改框架页 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > iframe </ title > </ head > < body > < script type ="text/javascript" > function SetCwinHeight(){ var bobo = document.getElementById( " bobo " ); // iframe id if (document.getElementById){ if (bobo && ! window.opera){ if (bobo.contentDocument && bobo.contentDocument.body.offsetHeight){ bobo.height = bobo.contentDocument.body

前端实战------跨域问题

由 杀马特。学长 韩版系。学妹 提交于 2020-03-16 15:35:18
这两天遇到一个问题就是在首页点登录的时候用iframe框架弹出登录界面，输入用户密码点登录的时候发现不能关掉这个弹出界面(取消也不行)，使用很多方法都不行，最后求助百度，终于让我找到了同源策略---跨域。下面稍微讲一下： 同源策略指的是：端口、协议、域名相同 同源策略是什么 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以baidu.com下的js脚本采用ajax读取sogou.com里面的文件数据是会被拒绝的。 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 另外，同源策略又分为以下两种： DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。 XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。 怎么解决我的这个问题 简单介绍一下情况，在A.html页面有一个iframe框架引用了B.html页面，我们现在呢需要点击B.html里面的按钮来关闭iframe或者登录后关闭；这里很多人会讲我引用同一个js，用里面的函数不行吗？这里我也试过，不知道是我没弄好还是怎么了，效果就是达不到，所以找到了同源策略来解决它。话不多说先上代码：

IFrame实现的无刷新(仿ajax效果)...

由 丶灬走出姿态 提交于 2020-03-16 08:19:01
前台代码： <iframe style="display:none;" name="gg"></iframe> <form action="/demo/add" method="post" target="gg"> <table class="info_form table table-striped"> <tr> <td>姓名</td> <td><input name="name" /></td> </tr> <tr> <td>年龄</td> <td><input name="age" /></td> </tr> <tr> <td>颜值</td> <td><input name="yz" /></td> </tr> </table> <button class="btn btn-default" type="submit">确定</button> </form><script>function call_back(){　　alert("睡你妈逼，起来嗨！");}</script>注意:form的target属性。设置为iframe的name属性值。这样的话后台返回的view会显示在iframe中 后台代码: public ActionResult Add() { return View(); } [HttpPost] public ActionResult Add(my m) {

How to check if IFrame is visible on page using jQuery

由 空扰寡人 提交于 2020-03-16 03:43:44
问题 Suppose I have a page with multiple IFrames : Main Page <div id='someDiv1' style='display:none; '> <iframe id='iframe1' src='iframe1.html'> <input id='someinput'></input> </iframe> </div> IFrame (iframe1.html) <input id='someinput'></input> <script> function isElementVisible(elem){ } </script> In this scenario how do i check if the element is visible/hidden due to the parent div of IFrame hiding it? I tried using $('#someinput').is(':visible') but I always get true if I run it inside IFrame.

前端常见跨域解决方案（全）

由 ≡放荡痞女 提交于 2020-03-15 11:27:44
什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。 什么是同源策略？ 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 常见跨域场景 URL 说明 是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不同文件或路径 允许 http://www.domain.com/lab/c

iframe 使用

由 霸气de小男生 提交于 2020-03-15 02:04:17
iframe 框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接，有明显不同的通信方式，同域下的数据交换和DOM元素互访就简单的多了，而跨域的则需要一些巧妙的方式来实现通信。 一、同域下父子页面的通信 父页面 parent.html < html > < head > < script type= "text/javascript" > function say() { alert("parent.html------ >I'm at parent.html"); } function callChild() { //document.frames["myFrame"].window.say();//只适用于ie浏览器 myFrame.window.say(); myFrame.window.document.getElementById("button").value="我变了"; } </ script > </ head > < body > < input type= button value= "调用child.html中的函数say()" onclick= "callChild()" > < iframe name= "myFrame" src= "child.html" > </ iframe > </ body > </ html
订阅 iframe