javascript - Web 应用程序中的 jscroll Pane

Question

我想在我的应用程序中使用 jscrollpane。 如果我将滚动 Pane 定义如下

<div id="scroll-pane">
   <p>This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
        which can be styled at will.</p>
  </div>

在脚本中我定义如下

$('#scroll-pane').jScrollPane()
                         .bind('mousewheel', function (e) {
                             e.preventDefault();
                         }
                );

工作正常。 如果我在 div 标签内提供 iframe，例如

<div id="scroll-pane">
                <iframe id="scroll" src="//Home/GridColumnMenu"></iframe>
   </div>

它不起作用。有人可以告诉我该怎么做吗？

Answer 1

为了在 iframe 中使用 jscrollpane，您需要使用 jscrollpane 代码来准备它们，如文档 ( http://jscrollpane.kelvinluck.com/iframe.html ) 中所示。

例如，

http://jsfiddle.net/6CbwL/1/

包含 iframe 的父 div

js

$('#scroll-pane').jScrollPane()
                         .bind('mousewheel', function (e) {
                             e.preventDefault();
                         }
                );

html

<div id="scroll-pane">
    <b>An Iframe at the bottom</b>
   <p>This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
        which can be styled at will.This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
        which can be styled at will.This demonstration shows basic
....
<iframe id="scroll" src="http://jsfiddle.net/Rf26T/1/show"></iframe>
  </div>

CSS

#scroll-pane{
    height:100px;/*to demonstrate jscrollpane on the parent div containing the iframe*/
}
iframe {
width: 100%;
height: 200px;
border: 0;
}

iframe 代码

http://jsfiddle.net/Rf26T/1/

js

$(function () {
    var win = $(window);
    // Full body scroll
    var isResizing = false;
    win.on(
        'resize',

    function () {
        if (!isResizing) {
            isResizing = true;
            var container = $('#content');
            // Temporarily make the container tiny so it doesn't influence the
            // calculation of the size of the document
            container.css({
                'width': 1,
                    'height': 1
            });
            // Now make it the size of the window...
            container.css({
                'width': win.width(),
                    'height': win.height()
            });
            isResizing = false;
            container.jScrollPane({
                'showArrows': true
            });
        }
    }).trigger('resize');

    // Workaround for known Opera issue which breaks demo (see
    // http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
    $('body').css('overflow', 'hidden');

    // IE calculates the width incorrectly first time round (it
    // doesn't count the space used by the native scrollbar) so
    // we re-trigger if necessary.
    if ($('#full-page-container').width() != win.width()) {
        win.trigger('resize');
    }
});

html

<div id="content">
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique non urna sed vu...
</p>
</div>

CSS

body {
    background: #fff;
    overflow: auto;
    height: 100%;
}

编辑 - 这是对评论的回复

如果动态创建iframe有两种情况，

*1.*您已将 jquery 和 jscrollpane 库放置在 iframe 的 head 元素中，以及此答案中上面显示的代码。然后就可以直接运行了，如下例

http://jsfiddle.net/EBz3s/show

http://jsfiddle.net/EBz3s/ - 代码

如您所见，使用的 iframe 与上面第一个示例创建的 iframe 相同。

*2.*您尚未放置 js 库或代码，并且您不打算添加它们。在这种情况下，场景是像情况 1 一样动态创建 iframe，但还要添加与 jquery、jscrollpane 相关的 js 代码、iframe 的自定义代码(如上所示)、jscrollpane css。由于本例中引用的 iframe 没有加载任何外部库或 js 代码等。 这并非小事，必须小心。在此示例中，

http://jsfiddle.net/EBz3s/show (需要等待 2-3 秒才能加载库，然后 jscrollpane 才能运行，解释如下)

提供的解决方案提供了一种动态添加资源的方法，但没有一种稳健的方法来等待每个资源加载后再加载下一个资源(例如，等待 jquery 加载，然后加载 jscrollpane 等)。仅用于提供工作示例的方法是函数 setTimeout 和加载库之间的 1-2 秒延迟。如果是这种情况，您将需要实现更好的东西，可能是一个递归 setTimeout 来检查 jQuery 是否已加载，然后从 iframe 中调用 getScript 。此外，所提供的 importScript(iframe,jsFile,jsCode) 对于实现更强大的解决方案确实很有帮助。

最后是代码，以防 fiddle 消失，

js

$('input[type=button]').not('[value*="NOT"]').click(function(){
    var url = "http://jsfiddle.net/Rf26T/1/show";
    $("#scroll-pane1").html("<iframe src =" + url + " style='width:100%;border:none;'></iframe>");
});


$('input[type=button][value*="NOT"]').click(function(){
    var url = "http://jsfiddle.net/7Lc9V/show";

    var $iframe=$("<iframe src="+url+" style='width:100%;border:none;'></iframe>");
    $("#scroll-pane2").append($iframe);
    $iframe.load(function(){

        importCSS($iframe.get(0),"http://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.14/jquery.jscrollpane.min.css")

        importScript($iframe.get(0),"http://code.jquery.com/jquery-1.9.1.js");

        importScript($iframe.get(0),null,"function importScript(iframe,jsFile,jsCode){var heads = iframe==null?document.getElementsByTagName('head'):iframe.contentWindow.document.getElementsByTagName('head');var script = document.createElement('script');if(jsCode){try {script.appendChild(document.createTextNode(jsCode));} catch (e) {script.text = jsCode;}}else{script.setAttribute('src',jsFile);}script.setAttribute('type','text/javascript');heads[0].appendChild(script);}");

        importScript($iframe.get(0),null,"setTimeout(function(){importScript(null,'http://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.14/jquery.jscrollpane.js');},1000);");

        importScript($iframe.get(0),null,"setTimeout(function(){importScript(null,null,\"$(document).ready(function(){$(function () {var win = $(window);var isResizing = false;win.on('resize',function () {if (!isResizing) {isResizing = true; var container = $('#content');container.css({'width': 1,'height': 1});container.css({'width': win.width(),'height': win.height()});isResizing = false;container.jScrollPane({'showArrows': true});}}).trigger('resize');$('body').css('overflow', 'hidden');if ($('#full-page-container').width() != win.width()) {win.trigger('resize');}});});\");},2000);");

    });

    function importCSS(iframe,cssFile){
        var heads = iframe==null?document.getElementsByTagName('head'):iframe.contentWindow.document.getElementsByTagName('head');
        var css = document.createElement('link');
        css.setAttribute("rel", "stylesheet")
        css.setAttribute("type", "text/css")
        css.setAttribute("href", cssFile)
        heads[0].appendChild(css);
    }

    function importScript(iframe,jsFile,jsCode){
        var heads = iframe==null?document.getElementsByTagName('head'):iframe.contentWindow.document.getElementsByTagName('head');
        var script = document.createElement('script');
        if(jsCode){
             try {
              script.appendChild(document.createTextNode(jsCode));
             } catch (e) {
              script.text = jsCode;
             }
        }else{
            script.setAttribute("src",jsFile);
        }
        script.setAttribute('type','text/javascript');
        heads[0].appendChild(script);
    }

});

html

<input type="button" value="add iframe that includes jscrollpane" />
<div id="scroll-pane1">
</div>
<input type="button" value="add iframe that DOES NOT include jscrollpane" />
<div id="scroll-pane2">
</div>