根据内容调整iframe高度

2024-03-28

我正在使用以下脚本自动调整 iframe 高度。

function autoIframe(frameId) {
  try {
    frame = document.getElementById(frameId);
    innerDoc = (frame.contentDocument) ?
               frame.contentDocument : frame.contentWindow.document;
    objToResize = (frame.style) ? frame.style : frame;
    objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
  }
  catch (err) {
    window.status = err.message;
  }
}

我有三个 jquery 选项卡和前两个选项卡中的 iframe(myiframe1 和 myiframe2)

我在 iframe 加载时调用上面的代码。

<iframe id="myiframe1" width="100%" onload="autoIframe('myiframe1');"
        scrolling="auto" frameborder="0" src="mypath1">
</iframe>

<iframe id="myiframe2" width="100%" onload="autoIframe('myiframe2');"
        scrolling="auto" frameborder="0" src="mypath2">
</iframe>

这在 google chrome 和 IE8 中运行良好。 但在 Firefox 中,第一个选项卡(可见选项卡)中的 iframe 具有根据内容的高度,而第二个选项卡中的 iframe 未设置正确的高度。第二个选项卡的高度设置为 10px。

这里可能出现什么问题?


display:none元素的高度为 0 iirc,但 jquery 提供了一种“不隐藏而是将选项卡内容移出屏幕”的方法。

您可以在这里找到文档/示例:

jquery ui 文档 - 选项卡 - 常见问题解答 http://www.jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

根据内容调整iframe高度 的相关文章

  • Bootstrap 3 + 选择 + jquery 验证丢失格式

    我有下面的代码http jsfiddle net emamut CBjmj 4 http jsfiddle net emamut CBjmj 4 validator setDefaults ignore hidden not select
  • 未捕获的类型错误:$(...).lightGallery 不是函数

    当我尝试单击该链接时 它会在浏览器控制台中显示 Uncaught TypeError lightGallery is not a function anonymous function index html 250dispatch jque
  • jQuery Mobile 断开链接。正确的使用方法是什么?

    我将 jQuery Mobile 添加到我的项目中 因为我希望滑动事件触发 Bootstrap 轮播滚动 用它编码一天左右后 我注意到内部链接不再起作用 我可以使用以下两个页面 test1 html 可靠地重现这一点 a href test
  • jQuery Draggable + Sortable - 如何在两个可滚动列表之间拖放

    我想要两个列表 可用项目和选定项目 其中可用项目通过拖放分配给选定项目 我要求所选项目可排序 但不要求可用项目可排序 挑战在于这两个列表都可能包含大量项目 因此需要可滚动 这是我迄今为止的 jQuery
  • 从 select2 选定选项获取属性值

    我正在使用 Select2 插件http ivaynberg github io select2 select2 latest html http ivaynberg github io select2 select2 latest htm
  • 从 php 脚本返回 JSON 对象

    我正在做一个AJAXGET使用 jQuery 向 PHP 文件发出请求 我希望 PHP 脚本返回一个 JSON 对象 但是目前它返回一个 JSON 字符串 我意识到我可以使用JSON parse然而 在 jQuery 代码中 我对 API
  • 如何配置 Webpack 5 包以使用全局 jQuery?

    我有一个正在加载 jQuery 的网页 其中有一个指向 CDN 的脚本标记 我正在将 jQuery 加载到全局范围内 并且在整个站点中都有少量 JS 使用它 这一切都工作正常 我想继续以这种方式加载 jQuery 除此之外 我使用 Webp
  • 为什么附加到窗口[编辑]

    我正在查看 qunit 的代码 我的问题是为什么你想通过属性将 qunit 对象附加到 window 对象 这是链接file http github com gutzofter qunit blob master qunit qunit j
  • AJAX 表单不显示成功或错误消息

    这个问题我以前也问过 但还是没搞明白 我做了一些改变 但不幸的是我仍然没有得到任何运气 表单本身可以工作 但当用户尝试发送表单时 它还应该显示错误或成功消息 但它不显示消息 而是发送表单而不显示它 看看我的代码 HTML
  • 如何阻止远程表单提交?

    我有一个可以远程和正常使用的表格 form for comment html class comment form remote request xhr do f f text area body f submit 我希望仅在以下情况下提交
  • 使用 jQuery 加载脚本时保持范围

    假设我有一个包含以下内容的文件 test js var test something 然后我有一个主要脚本需要加载 test js 以获取测试变量 显然这有效 ajax dataType script cache true url test
  • 在 spring mvc 环境中使用查询使用 ajax 调用的结果填充列表框选项。

    目前 我正在处理我的第一个 jquery ajax 调用 并且在如何将服务器端结果填充到我的列表框中时遇到问题 spring 控制器正确地返回数据 希望如此 我只是在填充列表框时遇到了 jquery 部分的问题 这是我的 ajax 调用 f
  • 设置 datetime-local 的默认时间值

    我使用这个 html 标签作为日期时间选择器
  • textarea根据内容js或jquery设置高度

    这是我的代码 保持简单
  • 使用 AJAX (jQuery) 加载日期在 div 内无限滚动

    我一直试图通过几个问题来解决这个问题 找出不同的部件 然后组装它们 但现在我放弃了 我正在尝试做的事情 用户在页面上单击按钮 然后使用 jQuery ajax 将内容列表加载到 div 中 当他或她滚动到 div 底部时 加载更多内容 正如
  • 检查 Javascript 中的 URL 是否损坏

    这个问题之前已经发布在 Stack 上 但没有一个具体到我想要理解的内容 检查 URL 是否正确的最简单方法是发送 http Head 请求 但是如何使用它来指定 URL 呢 我在之前的帖子中发现了这一点 function UrlExist
  • 使用不正确的凭据登录时,Jquery Mobile Rails & Devise 加载页面时出错

    我正在掌握 Rails 3 的窍门 并制作了几个可用的应用程序 我是在 Rails 中使用 javascript 或 jquery 的新手 我有一个使用 Rails 3 2 devise 和 cancan 的工作应用程序 然后我将其转换为使
  • Jquery 文件上传 - $_FILES 数组为空

    使用 Jquery 文件上传 它正在 工作 并上传图像并显示拇指 但是 当我在处理程序中提交表单时 如果我转储 FILES 则那里什么也没有 我基本上使用的是 Basic Plus 示例 并将 autoUpload 设置为 false 我希
  • jQuery 创建多维数组

    我花了很长时间试图弄清楚如何在 jQuery 中创建多维数组 我在循环之外实例化数组 在循环内部我想添加数组元素 i 0 loop start
  • Firefox 和 JavaScript 重定向

    我目前在使用 Firefox 时遇到问题 所有其他浏览器都以正确的方式运行 甚至 IE6 我想要做的是重定向到子页面但留下历史记录条目 据我所知 有两种重写url的方法 window location some url 重定向到带有历史记录

随机推荐