我有一个网站,我在 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 菜单链接时重新加载页面。
最佳答案
在每个 window.resize 事件上触发 retrieveInfo
是否可以解决问题?
通过展开左侧菜单,您基本上是在调整 iframe 窗口的大小。如果您重新发布消息,父窗口中的 iframe 将相应地重新调整。
我曾经用一个外部库解决了这个问题,比如 Iframe resizer ( https://github.com/davidjbradshaw/iframe-resizer ) 对于不支持“postMessage”的浏览器,这可能对您有所帮助。
关于javascript - 没有垂直滚动条的跨域iframe调整大小修复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27794933/