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的更多相关文章

  1. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  2. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  3. 关于bootstrap的响应式插件respond.min.js在IE8下出现:拒绝访问。respond.min.js,行: 5,列: 746报错问题

    本地在IE8浏览器下测试兼容性的时候,出现了以下的报错: 该问题在bootstrap的官网有介绍:https://v3.bootcss.com/getting-started

  4. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  5. Ext JS 6学习文档-第8章-主题和响应式设计

    Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...

  6. CSS3之响应式布局

    在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...

  7. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  8. 响应式Web设计与CSS(下)

    4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力,始于媒体类型. 媒体类型用于针对特定的环境应用样式,包括屏幕显示.打印和电视等. 通过给link元素添加media属性,可以指定 ...

  9. 响应式web布局中iframe的自适应

    困境 在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度或高度小于iframe的宽度或高度时,会出现iframe元素 ...

随机推荐

  1. java实现的MySQL自动备份和还原(struts2+Hibernate)---兼容 window+Linux

    相信很多朋友都经历过数据库出问题的情况,我也同样(见我的上一篇博文:phpmyadmin误删表后的恢复过程(心惊胆跳啊)   ).如果数据很大或者很重要,那么恢复起来是相当困难的,所以我们在做一个相对 ...

  2. 《安全参考》HACKCTO-201311-11

    小编的话 “晴空一鹤排云去,便引诗情到碧宵” 11月是一个让人思绪飞扬.感慨万千的时节. 就在这时,在我们小伙伴的并肩奋战下,第十一期<安全参考>又跟大家见面了. 你还在为女朋友在购物狂欢 ...

  3. 复习后台代码(与前面clentHttp连接网络结合)

    package com.zzw.LoginServelt; import java.io.IOException; import java.io.PrintWriter; import javax.s ...

  4. Spark官方文档——本地编写并运行scala程序

    快速开始 本文将介绍如何用scala.java.python编写一个spark单击模式的程序. 首先你只需要在一台机器上成功建造Spark:做法: 进入Spark的根目录,输入命令:$ sbt/sbt ...

  5. FileInputStream利用缓冲数组读取数据

    package cd.itcast.fileinputstream; import java.io.File; import java.io.FileInputStream; import java. ...

  6. android在程序中打开另一个程序

    在开发android应用的时候,在一些情况下要有前置条件,比如这边所说的要启动时要确保别的应用程序服务已经打开  或者在操作中启动别的应用等. 先来一段google上的代码: 1. 已知包名和类名的情 ...

  7. MongoDB 学习笔记(三)—— 修改器的使用

    通常文档只会有一部分数据要更新,所以使用修改器来操作文档极为高效. 小技巧:了解函数功能,不带括号即可.如:db.blog.update即可查看update函数的具体参数和方法体. $set修改器 & ...

  8. Moses更改权重的命令变化 -d -t -

    -l  可以用: weight-l 或者lm  (不需要在前面加-)   还是用-weight-overwrite “Distortion0= 0"更保险 reording weight i ...

  9. MySQL使用rand函数实现随机数[转]

    如何写一个语句能一下更新几百条MYSQL数据! 需要测试MYSQL数据库,里面有一个上万条数据的数据库,如何写一个PHP文件一下每次更新几百条信息,我都是写一个循环一次更新一条信息,这样我知道用WHI ...

  10. 关于asp.net和iis的进程/线程问题,假如网站有1000个人访问,会产生多少个进程/线程啊

    详解 ASP.NET异步   超好的文章