javascript - 没有垂直滚动条的跨域iframe调整大小修复

Question

我有一个网站，我在 iframe 中显示信息。 iframe 中的信息来自 Salesforce 域。正在获取的数据以“培训指南”的形式出现，其中有几页。

我在两个域上都添加了 javascript 代码以修复不断变化的高度，从而删除垂直滚动条。销售人员页面中的代码:

  function retrieveInfo(){
          parent.postMessage(document.body.scrollHeight, '*');
        }

        function showLoading(){
            $('#dvLoading').show();
        }

写在我网站页面的代码是:

 function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
  var height = parseInt(event.data); // add some extra height to avoid scrollbar
  iframe.height = height + "px";
}, false);

我在页面中的 iframe 是:

<iframe id="my_iframe" src="https://cp.secure.force.com/mydomainhome" width="100%"  onload="resizeCrossDomainIframe('my_iframe', 'https://cp.secure.force.com/');" scrolling="yes"></iframe>

iframe 中的数据有一个左 Pane 和一个右 Pane 。左 Pane 包含显示相应类(class)内容的可折叠菜单列表。单击左 Pane 菜单会展开。我遇到的问题是在页面加载时调用了用于删除 V-scroll 的 javascript 代码，但是一旦页面加载并且我单击左 Pane 以展开它，v-scroll 就会重新出现.

这是页面在页面加载时呈现的方式:

这是我用内部滚动条展开左 Pane 菜单后页面呈现的样子:

有没有一种方法可以防止在展开左 Pane 菜单后出现垂直滚动条。不过，我不想在单击每个左 Pane 菜单链接时重新加载页面。

Answer 1

在每个 window.resize 事件上触发 retrieveInfo 是否可以解决问题？通过展开左侧菜单，您基本上是在调整 iframe 窗口的大小。如果您重新发布消息，父窗口中的 iframe 将相应地重新调整。

我曾经用一个外部库解决了这个问题，比如 Iframe resizer ( https://github.com/davidjbradshaw/iframe-resizer )对于不支持“postMessage”的浏览器，这可能对您有所帮助。