使用 jQuery 将高度设置为 iframe 后的滚动问题

Question

我正在使用 jquery 将高度动态设置为 iframe。它工作正常，但问题是，如果 link 上的用户 clicks 要查看 DataList 以下的更多数据，则它会将高度完美设置为 iframe 但它会滚动到顶部本身。我想将 Scroll position 保持在 LinkButton 的 Click 时的位置。我正在使用 c# LinkButton 但这并不重要。整个页面都在 iFrame 内，所以我只是根据 document 高度设置 iframe 高度。因此根据代码在 jquery 的 pageLoad() 上调用 function。

我的代码：

        function adjustHeight() {
            var iframe = jquery(window.top.document).find("#frameContent");
            iframe.height(0 +'px');

            var height = jquery(document).height() + 30;

            iframe.height(height +'px');
        }

        function pageLoad() {
            adjustHeight();
        }

怎么做？一切都在 c# 中。 DataList 和 LinkButton 在 UpdatePanel 里面，我只是使用 jquery.

设置高度 HTML代码：DataList HTML with View More

Answer 1

据我所知，我假设用户点击的 link 是锚点 link 或 # link，对吗？这将导致页面跳到顶部。你可以做的是，在你的点击函数/事件中 return false:

示例：

$("a.someLink").bind("click", function(e){ // Your logic here... // The below prevents the native behavior of the link occurring... e.preventDefault(); e.returnValue = false; return false; })

更新

尝试从您的按钮 (link) 中删除内联 javascript 函数，而是使用 jQuery 实现它，添加 return false 等。所以您的按钮代码现在看起来像这样：

<a href="#" class="viewmore" id="lnkbtnViewMore">View More</a>

和jQuery像这样：

$("#lnkbtnViewMore").bind("click", function(e){ __doPostBack('lnkbtnViewMore',''); e.preventDefault(); e.returnValue = false; return false; })

这应该可以解决问题...

Answer 2

经过多次尝试，我得到了解决方案。

这只是因为我在设置新高度之前将高度 0 设置为帧而引起问题。
简单地说，我删除了下面的行并且它起作用了。 :)

iframe.height(0 +'px');

使用 jQuery 将高度设置为 iframe 后的滚动问题

Scroll Issue after setting height to iframe using jQuery

html

css

asp.net

iframe

jquery