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 正确调整大小的问题。
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.
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.
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.
a.html and c.html in domain domain1.com.
b.html in domain domain2.com.
a embed b b embed c
a.html in domain domain1.com.
b.html in domain domain2.com.
a embed b
Dependency free, IE8+
MIT
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。