javascript - scrollTop 在 iframe 内不能很好地工作

Question

我有一个使用 cloudconvert.com 创建的 html 文件，我用 java 脚本封装了该文件，以突出显示其中的文本，并使用 JQuery scrollTop() 函数滚动到第一个突出显示。请参阅示例:

function doSearch2(text,color) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();

        sel.collapse(document.body, 0);

        while (window.find(text)) {
            document.execCommand("HiliteColor", false, color);
            sel.collapseToEnd();
        }
        document.designMode = "off";
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("BackColor", false, color);
            textRange.collapse(false);
        }
    }

        var sel2 = document.getSelection();
        var seltop = $(sel2.anchorNode.parentElement).offset().top;
        var doccurrenttop = $('#page-container').scrollTop();
        var scrollto = doccurrenttop + seltop - 70; // spce of 70px
        if (scrollto < 0) { scrollto = 0; }
        $('#page-container').scrollTop(scrollto);
}

doSearch2("Cross","yellow");

http://jsfiddle.net/3c3vx862/

我尝试将 doSearch2() 函数插入 html 文件的头部，并将其加载到新 html 文档内的 iframe 上。然后我从外部文档上的按钮调用 doSearch2()。

scrollTop 工作正常，但在某些情况下(例如滚动到文档底部和其他随机位置)除外。当我调试它时，我发现 sel2 (= document.getSelection()) 为零。

有什么想法吗？

谢谢!

Answer 1

嗯，它可能不适用于您那里生成的所有脚本和 html，但您可以看看我在这里为您制作的这个 jsfiddle。

将其添加到您的 html 页面:

<a href="#0" class="cd-top">Top</a>

脚本

jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
    //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
    offset_opacity = 1200,
    //duration of the top scrolling animation (in ms)
    scroll_top_duration = 700,
    //grab the "back to top" link
    $back_to_top = $('.cd-top');

//hide or show the "back to top" link
$(window).scroll(function(){
    ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
    if( $(this).scrollTop() > offset_opacity ) { 
        $back_to_top.addClass('cd-fade-out');
    }
});

//smooth scroll to top
$back_to_top.on('click', function(event){
    event.preventDefault();
    $('body,html').animate({
        scrollTop: 0 ,
        }, scroll_top_duration
    );
});

});

CSS

.cd-top {
 display: inline-block;
 height: 40px;
 width: 40px;
 position: fixed;
 bottom: 100px;
 right: 10px;
 z-index: 10;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
 /* image replacement properties */
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 background: rgba(232, 98, 86, 0.8) url(../img/cd-top-arrow.svg) no-repeat   center 50%;
 visibility: hidden;
 opacity: 0;
 -webkit-transition: opacity .3s 0s, visibility 0s .3s;
 -moz-transition: opacity .3s 0s, visibility 0s .3s;
 transition: opacity .3s 0s, visibility 0s .3s; 
 }
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s; 
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes    less visible */
opacity: .5;
}
.no-touch .cd-top:hover {
 background-color: #e86256;
 opacity: 1;
 }
 @media only screen and (min-width: 768px) {
 .cd-top {
 right: 20px;
 bottom: 20px;
  }
 }
@media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
 }
}

jsFiddle here