Javascript web应用程序中的jscroll窗格_Javascript_Jquery_Jscrollpane

Javascript web应用程序中的jscroll窗格

javascript jquery

Javascript web应用程序中的jscroll窗格,javascript,jquery,jscrollpane,Javascript,Jquery,Jscrollpane,我想在我的应用程序中使用jscrollpane。如果我定义滚动窗格如下 <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> 它工作得很好。如果我给iframe一个

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

<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>

它工作得很好。如果我给iframe一个div标签，比如

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

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

为了在iFrame中使用

jscrollpane

，您需要使用文档（）中所示的jscrollpane代码来准备它们

比如说,

包含iFrame的父div

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

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

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

$('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);
    }

});

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

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

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

$('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

<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>

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

<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>

iframe的代码

$(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="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>

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

<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>

编辑-这是对评论的回应

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

*1.*您已经在iframe的

head

元素中放置了jquery和jscrollpane库，以及上面这个答案中显示的代码。然后它将直接工作，如下面的示例所示

-守则

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

*2.*您尚未放置js库或代码，也不打算添加它们。在本例中，场景是动态创建iframe，如案例1所示，但也添加与jquery相关的js代码、jscrollpane、iframe的自定义代码，如上图所示，即jscrollpane css。因为本例中引用的iframe没有加载任何外部库或js代码等。这不是小事，必须小心。在这个例子中

（需要等待2-3秒才能加载libs，从而使jscrollpane正常工作，下面提供了解释）

提供的解决方案提供了一种动态添加资源的方法，但没有一种健壮的方法，即在加载下一个资源之前等待每个资源加载（例如，等待jquery加载，然后加载jscrollpane等等）。仅用于提供工作示例的方法是function

setTimeout

和加载libs之间的1-2秒延迟。如果这是您的情况，您将需要实现更好的功能，可能是一个递归的

setTimeout

，它检查jQuery是否已加载，然后从iframe中调用

getScript

。此外，本文提供的

importScript（iframe、jsFile、jsCode）

对于实现更健壮的解决方案非常有帮助

最后是代码，以防小提琴消失

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

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

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

$('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);
    }

});

$（'input[type=button]'）。非（'value*=“not”]）。单击（function（）{
变量url=”http://jsfiddle.net/Rf26T/1/show";
$（“#滚动窗格1”）.html（“”）；
});
$（'input[type=button][value*=“NOT”]'）。单击（function（）{
变量url=”http://jsfiddle.net/7Lc9V/show";
变量$iframe=$（“”）；
$（“#滚动窗格2”）.append（$iframe）；
$iframe.load（函数（）{
importcs（$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，“函数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.createtexnode（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-isresising=false；win.on（'resize'，function（）{if（！isresising）{isresising=true；var-container=$（'content'）；container.css（{'width'：1，'height'：1}）；container.css（{'width'：win width'：win.width（），'height'：win.height（）}）；isresising=false；container.jScrollPane（{'showrows'：true}）；}}）.trigger（'resize'）；$（'body'）.css（'overflow'，'hidden'）；if（$（'full page container'）.width（）=win width（））{win.trigger（'resize'）；}}）；\”；\”，2000）；）；
});
函数导入（iframe、cssFile）{
var heads=iframe==null？document.getElementsByTagName（'head'）：iframe.contentWindow.document.getElementsByTagName（'head'）；
var css=document.createElement（'link'）；
css.setAttribute（“rel”、“样式表”）
css.setAttribute（“类型”、“文本/css”）
css.setAttribute（“href”，cssFile）
heads[0]。appendChild（css）；
}
函数importScript（iframe、jsFile、jsCode）{
var heads=iframe==null？document.getElementsByTagName（'head'）：iframe.contentWindow.document.getElementsByTagName（'head'）；
var script=document.createElement（'script'）；
if（jsCode）{
试一试{
appendChild（document.createTextNode（jsCode））；
}捕获（e）{
script.text=jsCode；
}
}否则{
setAttribute（“src”，jsFile）；
}
setAttribute（'type'，'text/javascript'）；
头[0]。追加子项（脚本）；
}
});

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>

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

<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>

为了在iFrame中使用

jscrollpane

，您需要使用文档（）中所示的jscrollpane代码来准备它们

比如说,

包含iFrame的父div

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

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

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

$('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);
    }

});

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

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

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

$('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

<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>

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

<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>

iframe的代码

$(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="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>

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

<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>

编辑-这是对评论的回应

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

*1.*您已经在iframe的

head

元素中放置了jquery和jscrollpane库