首页 文章

嵌入式iframe不滚动

提问于
浏览
0

我有一个由其他公司提供的嵌入式iframe用于事件注册 .

https://casaimports.com/food-expo/attendee-registration/

无论我尝试什么,我都无法使用鼠标滚轮滚动iframe . 如果您将光标放在表单上,它将不会滚动 . 如果光标在iframe附近,在滚动条附近则可以正常工作 .

提供的原始代码没有溢出样式集 . 我添加了它并尝试了溢出:滚动和溢出:自动但无效 .

这是给我的完整代码:

var userOffset = new Date().getTimezoneOffset();
var uagent = navigator.userAgent.toLowerCase();
var safariLink = document.getElementById("safari-link");
var iFrame = document.getElementById("iframeResizer0");
if (/safari/.test(uagent) && !/chrome/.test(uagent)) {
  safariLink.style.display = "inline";
  safariLink.setAttribute('href', safariLink.getAttribute('href') + '&Offset=' + userOffset);
  iFrame.style.display = "none";
  document.getElementById("iframe-loading").style.display = "none";
} else {
  safariLink.style.display = "none";
  iFrame.style.display = "inline";
  iFrame.setAttribute('src', iFrame.getAttribute('src') + '&Offset=' + userOffset);
}
iFrameResize({
  autoResize: false,
  log: true, // Enable console logging
  enablePublicMethods: true, // Enable methods within iframe hosted page
  checkOrigin: false,
  resizedCallback: function(messageData) { // Callback fn when resize is received
    document.getElementById("iframe-loading").style.display = "none";
  }
});
#iframe-loading {
  width: 100%;
  text-align: center;
}
<script src="https://tradeshow.perenso.net/registration/scripts/iframeResizer.min.js"></script>
<div id="iframe-loading"><img src="https://tradeshow.perenso.net/registration/content/images/ajax-loader.gif" /></div>

<iframe src="https://tradeshow.perenso.net/registration/embedded/index/CASAIMPORTSSEP18?RegType=CUSTOMER" style="border: 0; width: 100%; overflow:auto;" id="iframeResizer0" scrolling="yes"></iframe>

<div style="text-align: center;">

  <a href="https://tradeshow.perenso.net/registration/embedded/index/CASAIMPORTSSEP18?RegType=CUSTOMER" id="safari-link" target="_blank" class="button icon icon-after fa-chevron-right">Open Registration Form</a></li>


</div>

我感谢任何帮助 .

2 回答

  • 1

    你的iframe元素需要 scrolling="yes" 属性......

    https://www.w3schools.com/tags/att_iframe_scrolling.asp

  • 1

    您需要将 scrolling="yes" 属性添加到 HTML 中的 <iframe> 标记中 . 像这样:

    <iframe src="https://tradeshow.perenso.net/registration/embedded/index/CASAIMPORTSSEP18?RegType=CUSTOMER" style="border: 0; width: 100%; overflow:auto;" id="iframeResizer0" scrolling="yes"></iframe>
    

相关问题