IFrame
是一个分享资讯非常方便的的方式
只要输入
<iframe src="http://example.com/"></iframe>
就可以嵌入一个网页了!
然而,事实上并不是这么的完美,并不是所有的网页都允许嵌入…
譬如说Google,如果妳直接就输入Google 的网址,如下面
<iframe src="http://google.com"></iframe>
那么将只会得到一个空白的IFrame
而已…
如果有打开Console 的话,就会看到一些安全性上的错误,不过很可惜的JavaScript 很难去handle 这个错误…
针对IFrame
监听onerror是没用的,因为根本没有这个事件!
那么如果针对window.onerror
呢?
可以捕捉到错误,但是却不能判断到底能不能载入…(即便是可以嵌入的网站,也会有一些错误讯息出现)
最后如果针对IFrame
监听onload如果网站可以嵌入,就会触发这个 事件,如果不能嵌入就不触发
问题是,网站何时还会触发onload 事件呢? 如果用setTimeout
解的话,到底要设定多久呢?
怎么设定都会有问题,那么究竟该怎么样才可以准确的呈现出此网页不允许嵌入的资讯给User 看呢?
要针对几个IFrame
的特性来解决这个问题
- 当
IFrame
的src
的网址是允许嵌入的话,会把网页呈现出来 - 当
IFrame
的src
的网址是不允许嵌入的话,是不会改变目前的画面的 - 当
IFrame
没有给定src
时,内容是空白的
另外,有一个url
非常的特别,那就是about:blank
,这个url
就是全白的内容,连HTML
都没有
但是parent的JavaScript是可以操纵该IFrame
的内容的!
要怎么做就呼之欲出了!
- 把
IFrame
的src
设定为about:blank
-
监听
IFrame
监听load
事件,并且在callback
中要处里几件事情- 当中把先把错误讯息埋好
- 在把
IFrame
的src
换成要嵌入的url
- 取消监听
IFrame
的load
事件
- 看成果!
如果url
是不允许被嵌入的,就会看到错误讯息,反之则是正确的结果!
最后看范例吧…
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> #ifr { border-width: 0;opacity: 0; transition: .5s;}; </style> </head> <body> <div> <button id="google">Google</button> <button id="yahoo">Yahoo</button> <button id="jcluo">Jcluo</button> </div> <iframe id="ifr" ></iframe> </body> </html>
var ifr = document.querySelector('#ifr'); ifr.onload = function () { if (this.getAttribute('is-reset') == '1') { this.style.opacity = 0; this.style.display = 'block'; this.contentDocument.write("Can't not load Web"); var url = this.getAttribute('src-url'); this.setAttribute('src', url); this.setAttribute('is-reset',0); } else { this.style.opacity = '1'; } }; function changeUrl(url) { ifr.style.display = 'none'; ifr.setAttribute('is-reset',1); ifr.setAttribute('src', 'about:blank'); ifr.setAttribute('src-url', url); } document.querySelector('#google').onclick = function () { changeUrl('http://www.google.com'); } document.querySelector('#yahoo').onclick = function () { changeUrl('http://www.yahoo.com'); } document.querySelector('#jcluo').onclick = function () { changeUrl('http://blog.jcluo.net'); }
范例代码地址:http://jsbin.com/mijicuhobemo/3/embed?html,css,js,output
此范例由voluntariness所撰写
相关推荐
首先在父页面的javascript给定义一个window.name,并赋予一个字符串值,如window.name="test",其中赋予的字符串值可以随意定义,然后在Iframe页面的Form 标签中定义target属性,并且其值也必须与之前定义的window....
Iframe是一种嵌入网页的框架形式,Web页面可以通过更改嵌入的部分,达到部分内容刷新,通过本文和大家一起学习iframe实现局部刷新的几种方法汇总,对iframe局部刷新相关知识感兴趣的朋友一起学习吧
通用iframe下载excel等文件,程序非常简单,不依赖任何js和java框架,适合嵌入到java web开发的任何场景。
6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送...
6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送...
iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢? 一:去掉全部的滚动条 第一个方法: ...
LSPlayer iFrame SDK入门将Littlstar iframe嵌入网站时,您可以包括可选的Javascript SDK,用于与播放器进行交互并检查其状态。 使用者必须在全局范围内实现OnLSPlayerFrameReady函数,并确保页面上的每个iframe都...
主要介绍了JS修改iframe页面背景颜色的方法,涉及javascript操作iframe页面样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值计算 1.3 JavaScript编程起步 1.3.1 “Hello World!”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何...
javascript 中iframe高度自适应(同域) 今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElementById("frame"); //frame...
但是问题也来的iframe的高度是固定的不能与第三方网站很好的融合,又例如第三方网站使用了瀑布流插件,要滚动加载自动计算高度,那么先说跨域:iframe主域名不同跨域方法,假如网站 A.com B.com A 里面放入一个...
音量嵌入式控制器该项目致力于为客户提供与 volar iframe embeds 进行通信的能力。 这使他们能够通过 javascript 执行诸如暂停和播放(以及查找和接收元数据事件)之类的操作。为什么? 由于 Volar 播放器包含在 ...
众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。 用法举例: 需求是在http://www.demo.org/top.html中通过iframe方式嵌入...
嵌入 iframe 的页面,父页面与子页面均可以很轻松的在同域或跨子域的情况下进行读写操作;在完全不同域的情况下,也可以通过更改 hash 的方式进行通信。下面我在九个不同(版本的)浏览器中对此进行数据传输与更改的...
小工具 我对可嵌入 iframe 小部件的第一次体验 跑步: 安装 凉亭安装 咕噜咕噜的服务
1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值计算 1.3 JavaScript编程起步 1.3.1 “Hello World!”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何...
支持 iframe 方式嵌入的 Bilibili 播放器跳转 运行环境: 浏览器插件:Tampermonkey 浏览器插件:Requestly 安装 请先下载以上插件 以下步骤均基于 Google Chrome 插件:Requestly 相关配置 配置规则前需要注册该...
默认情况下,iframe会遮盖浏览器的地址栏,以显示与正在查看的网页的实际URL不同的URL。 换句话说,浏览器地址栏中的URL并非内容的实际URL。 基于哈希的路由允许通过专用网址定位每个iframe页面。 通过一个小...
钢琴可调整大小且响应Swift的iframe可嵌入钢琴和弦显示和播放器。用法以下HTML显示可播放的和弦。 。ma < iframe frameborder =" 0 " width =" 800px " height =" 400px " src =" ...