在前端开发中，我们经常需要在网页中嵌入外部页面或者其他应用程序的内容。这时候，如果我们采用传统的iframe标签或者embed标签等方式进行嵌入，会面临许多问题，比如无法跨域、页面加载速度过慢等等。因此，我们需要借助一些工具来解决这些问题。其中，NPM包Pym就是一种非常不错的解决方案。
Pym是什么？
Pym是一个小型JavaScript库，用于在父框架和嵌入式iframe之间建立双向通信。它可以帮助你轻松地将一个外部页面嵌入到你的网站中，并且可以通过API与外部页面进行交互。同时，Pym还提供了一些有用的功能，比如自适应高度，使得嵌入的内容能够在不同大小的屏幕上正常显示。
安装Pym
安装Pym非常简单，只需要使用npm命令即可：
--- ------- ------ ------
使用Pym
初始化Pym
安装完Pym后，我们首先需要初始化它。下面是一个最基本的Pym初始化代码示例：
--- --------- - --- ----------------------- --------------------------------- ----
其中，'parent-id'是用来标识父页面的元素id，'http://your-external-page.com/'则是需要嵌入的外部页面的URL地址。最后一个空对象参数可以传递一些可选的配置项。
向子页面发送消息
Pym提供了sendHeight和sendMessage两个方法，可以分别用于向子页面发送高度信息和自定义消息。下面是一个简单的使用示例：
--------------------------------------- - ----- ------ ------ ---
接收来自子页面的消息
当子页面想要向父页面发送消息时，可以通过postMessage方法实现。父页面可以在初始化时注册一个onMessage方法，用于接收来自子页面的消息。下面是一个简单的示例代码：
--- --------- - --- ----------------------- --------------------------------- -
---------- --------------
---
-------- ----------------------- -
--------------------- -------- - - ---------
-自适应高度
如果你的嵌入内容的高度会随着内容的变化而变化，那么你可以使用Pym提供的自适应高度功能。只需要让子页面发送一个高度信息给父页面，父页面就可以根据这个高度信息来自动调整嵌入内容的高度。下面是一个简单的示例代码：
-- -----------
----------------------
-- -----------
--- --------- - --- ----------------------- --------------------------------- -
--------- -------------
---
-------- --------------------- -
--------------------- ------- - - --------
-总结
Pym是一个非常方便实用的工具，可以帮助我们轻松地在网页中嵌入外部页面或者其他应用程序的内容，并且可以通过API与外部页面进行交互。使用Pym，我们可以解决一些传统的嵌入方式所遇到的问题，比如无法跨域、页面加载速度过慢等等。同时，Pym还提供了自适应高度等有用的功能，使得我们的嵌入内容能够在不同大小的屏幕上正常显示。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/35984