1 Star 0 Fork 0

rambo/iframe-resizer-demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

iframe-resizer-demo

Resize an iframe from another domain in multiple ways

用法

该包的js文件夹中包含两个缩小的 JavaScript 文件。第一个 ( iframeResizer.min.js ) 用于托管 iFrame 的页面。可以用原生JavaScript 调用;

const iframes = iFrameResize( [{options}], [css selector] || [iframe] );

第二个文件 ( iframeResizer.contentWindow.min.js ) 需要放置在 iFrame 中包含的页面中。该文件被设计为其他人系统上的来宾,因此没有依赖性,并且在被包含页面的消息激活之前不会执行任何操作。

典型设置

正常的配置是当浏览器窗口大小改变或者 iFrame 内容改变时,让 iFrame 调整大小。要进行此设置,您需要将 iFrame 的一个维度配置为百分比,并告诉库仅更新另一个维度。通常您会将宽度设置为 100% 并设置高度比例以适应内容。

<style>
  iframe {
    width: 1px;
    min-width: 100%;
  }
</style>
<script src="/js/iframeResizer.min.js"></script>
<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
<script>
  iFrameResize({ log: true }, '#myIframe')
</script>

注意:使用min-width设置 iFrame 的宽度可以解决 iOS 中阻止 iFrame 正确调整大小的问题。

How to use

Copy the repo into your disk.

$ git clone https://github.com/aaronpan/iframe-resizer-demo.git

Then play with the source files under the repo's demo* directories.

Index

  1. Subdomain iframe resize
  2. Use postMessage
  3. Web proxy for cross-domain iframe resize
  4. Use iframe-resizer library

Demo01: Subdomain iframe resize

a.html in domain sub1.aaron.com.

b.html in domain sub2.aaron.com.

a embed b

This demo only works for subdomain cross-iframe.

Demo02: Use postMessage

a.html in domain domain1.com.

b.html in domain domain2.com.

a embed b

Use HTML5 postMessage.

Support: Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4.

Demo03: Web proxy for cross-domain iframe resize

a.html and c.html in domain domain1.com.

b.html in domain domain2.com.

a embed b b embed c

Demo04: Use iframe-resizer library

a.html in domain domain1.com.

b.html in domain domain2.com.

a embed b

Dependency free, IE8+

Related Projects

License

MIT

空文件

简介

取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/rambo119/iframe-resizer-demo.git
git@gitee.com:rambo119/iframe-resizer-demo.git
rambo119
iframe-resizer-demo
iframe-resizer-demo
master

搜索帮助