javascript - 嵌入式 iframe 不滚动
问题描述
我有一个由另一家公司提供的嵌入式 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>
我很感激任何帮助。
解决方案
您需要将该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>
推荐阅读
- react-native - 修改index.js后黑屏
- c# - MVC 5 AJAX 代码未访问控制器类操作服务器端
- python - Google Cloud - 收到无效的 JSON 负载。'config' 中的未知名称“编码”:原始字段不重复,无法启动列表
- c# - 如何通过在自托管应用程序中使用 HTTPListener 托管的 HTML 页面下载文件
- regex - 使用查询参数和 URL 中的 ~ 进行 301 重定向
- html - 使用突出显示菜单中的文本
- 在 CSS 中
- java - 删除链表中的重复项(按升序排列)
- python - 矩阵乘法 - “ValueError:矩阵未对齐”。即使形状相同
- string - Kotlin 方法链接以处理列表中的字符串
- c# - 如何通过管道将哈希表传递给期望字典的 cmdlet?