我想在我的应用程序中使用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>
在脚本中我定义了类似
$('#scroll-pane').jScrollPane()
.bind('mousewheel', function (e) {
e.preventDefault();
}
);
工作正常。 如果我将iframe放在div标签的旁边，如
<div id="scroll-pane">
<iframe id="scroll" src="//Home/GridColumnMenu"></iframe>
</div>
它不起作用。任何人都告诉我该怎么做？
答案 0 :(得分：1)
要在iframe中使用jscrollpane，您需要使用jscrollpane代码准备它们，如文档（http://jscrollpane.kelvinluck.com/iframe.html）所示。
例如，
包含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的代码
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。 *您已在iframe的head元素中放置了jquery和jscrollpane库，以及本答案中上面显示的代码。然后它将直接工作，如以下示例所示
http://jsfiddle.net/EBz3s/show
http://jsfiddle.net/EBz3s/ - 代码
您可以看到使用的iframe与上面第一个示例创建的iframe相同。
* 2。 *您尚未放置js库或代码，并且您不打算添加它们。在这种情况下，场景是动态创建iframe，如案例1，但也添加与jquery相关的js代码，jscrollpane，iframe的自定义代码，如上所示，jscrollpane css。由于在这种情况下引用的iframe没有加载任何外部库或js代码等。 这不是微不足道的，必须小心谨慎。在这个例子中，
http://jsfiddle.net/EBz3s/show （需要等待2-3秒才能加载libs，因此需要jscrollpane才能运行，解释如下）
提供的解决方案提供了一种动态添加资源的方法，但没有一种强大的方法可以在加载下一个资源之前等待加载每个资源（例如，等待jquery加载然后加载jscrollpane等等）。用于提供工作示例的方法是函数setTimeout，并且在加载lib之间延迟1-2秒。如果这是你的情况，你需要更好地实现一些东西，可能是递归setTimeout，检查是否已加载jQuery，然后从iframe中调用getScript。此外，提出的importScript(iframe,jsFile,jsCode)对于实现更强大的解决方案非常有用。
最后代码以防小提琴消失，
<强> 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>