响应式嵌入 iframe Pym.js
Pym.js 可以让你在嵌入 iframe 的时候可自动的对 iframe 的大小进行调整以适应父一层容器,并且可以避免跨域问题。
支持浏览器:
- Internet Explorer 9, 10 (Windows 7), 11 (Windows 8)
- Chrome 32 (Mac 10.9)
- Firefox 26 (Mac 10.9)
- Safari 7 (Mac 10.9)
- iOS 7 Safari
- iOS 7 Chrome
- Android 4.4 Chrome
示例代码:
<div id="example-1"></div>
<div id="example-2"></div>
<script type="text/javascript" src="pym.js"></script>
<script>
var pymParent = new pym.Parent('example-1', 'child-1.html', {});
var second = new pym.Parent('example-2', 'child-2.html', {});
</script>
响应式嵌入 iframe Pym.js的更多相关文章
- baguetteBox.js响应式画廊插件(纯JS)
baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
- 关于bootstrap的响应式插件respond.min.js在IE8下出现:拒绝访问。respond.min.js,行: 5,列: 746报错问题
本地在IE8浏览器下测试兼容性的时候,出现了以下的报错: 该问题在bootstrap的官网有介绍:https://v3.bootcss.com/getting-started
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- Ext JS 6学习文档-第8章-主题和响应式设计
Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...
- CSS3之响应式布局
在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 响应式Web设计与CSS(下)
4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力,始于媒体类型. 媒体类型用于针对特定的环境应用样式,包括屏幕显示.打印和电视等. 通过给link元素添加media属性,可以指定 ...
- 响应式web布局中iframe的自适应
困境 在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度或高度小于iframe的宽度或高度时,会出现iframe元素 ...
随机推荐
- php设计模式之Proxy(代理模式)和Facade(外观)设计模式
Proxy(代理模式)和Facade(外观)设计模式它们均为更复杂的功能提供抽象化的概念,但这两种实现抽象化的过程大不相同 Proxy案例中,所有的方法和成员变量都来自于目标对象,必要时,该代理能够对 ...
- eclipse使用快捷键
注意热键冲突 内容补全键 Alt+/ 快速修复键 ctrl+1 代码移动 Alt+上下键(选中代码块) 左右移动 tab(右边)Shift+tab( ...
- html中的框架
1.总的代码 <frameset rows=20%,*> <frame src="top.html" /> <frameset cols=30%,*& ...
- LinearRegressionWithRegularization
在线性回归的基础上加上正则项: # -*-coding:utf-8 -*- ''' Created on 2016年12月15日 @author: lpworkdstudy ''' import nu ...
- 实战Django:官方实例Part5
俗话说,人非圣贤,孰能无过.在堆代码的过程中,即便是老攻城狮,也会写下一些错误的内容.俗话又说,过而能改,善莫大焉.要改,首先要知道哪里存在错误,这便是我们要对投票应用进行测试的原因. 21.撰写 ...
- Linux源代码情景分析读书笔记 物理页面的分配
函数 alloc_pages流程图
- Java 控制台执行带自定义包定义的类,出现“Exception in thread "main" java.lang.NoClassDefFoundError: ConnectSQLServer (wrong name: sine/ConnectSQLServer)”
1.先说明一下代码实现:自定义package sine, 源代码保存路径为:E:\JSP\HibernateDemo\HibernateDemoProject\src\sine\ConnectSQLS ...
- Java入门到精通——开篇
本系列博客大体框架构思了一段时间了,本系列博客包含了对现有知识的总结也有对未来知识的展望. 本系列博客包括七大部分如下: 第一部分 Java基础应用 讲述JAVA的基础从以下几方面讲述 ...
- hdu 5112 A Curious Matt
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5112 A Curious Matt Description There is a curious ma ...
- hdu 5058 So easy
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5058 So easy Description Small W gets two files. Ther ...