外部javascript无法与onsen framewowrk一起使用 [英] outside javascript not work with onsen framewowrk
问题描述
我正在使用onsen.ui框架，但是当我包含任何脚本时，他将无法正常工作 我如何接受在框架中包含javascript
i am use onsen.ui framework but when i include any script he do not working how i do accept include javascript in the framework
window.console = window.console || function(t) {};
span{
color:red;
}
<html><head>
<meta charset="UTF-8">
<title>CodePen - Navigator</title>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css'>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no" >
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Simple Navigation</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<button onclick="scrollWin()">Click me to scroll horizontally no work!</button><br><br>
<script>
function scrollWin() {
window.scrollTo(0, 140);
}
</script>
<span><br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</span>
</div>
</ons-page>
</ons-navigator>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script>
<script>
ons.bootstrap();
//# sourceURL=pen.js
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</body></html>
推荐答案
您遇到的问题不是JavaScript无法正常工作，而是您只是在尝试滚动错误的元素.
The problem you are experiencing is not that the javascript is not working but rather you're just trying to scroll the wrong element.
Onsen UI的ons-page元素创建自己的内容元素(div.page__content)，用于滚动目的.因此，您可以滚动该元素.但是它没有方法scrollTo，而是可以像这样设置scrollTop和scrollLeft属性:
Onsen UI's ons-page elements create their own content element (div.page__content) and that is used for scrolling purposes. So you can just scroll that element. However it does not have a method scrollTo, rather you can just set the scrollTop and scrollLeft properties like this:
document.querySelector('.page__content').scrollTop = 140; // for vertical
document.querySelector('.page__content').scrollLeft = 140; // for horizontal
如果将此功能用于scrollWin功能，则可以.
If you use this for your scrollWin function you will be fine.
还请注意-如果要使用水平滚动，则应包含一些较宽的内容，以便实际上可以滚动元素.
Also note - if you want to use horizontal scrolling you should have some content which is wider, so that you can actually scroll the element.
出于代码段的目的，我插入了以下内容:
For the purpose of the snippet I inserted the following:
<div style="position:absolute;width: 200%;height: 10px;"></div>
我认为您已掌握要点.
I think you get the gist of it.
最后，如果您想在准备好温泉时执行某些操作-例如，如果您要调用自动滚动功能，则可以执行以下操作:
And finally if you want to execute something when onsen is ready - for example if you want to call your autoscroll function you can do:
ons.ready(function(){ ... });
这是您修改的代码段:
window.console = window.console || function(t) {};
span{
color:red;
}
<html><head>
<meta charset="UTF-8">
<title>CodePen - Navigator</title>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css'>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no" >
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Simple Navigation</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<button onclick="scrollWin()">Click me to scroll horizontally no work!</button><br><br>
<script>
function scrollWin() {
document.querySelector('.page__content').scrollTop = 140; // for vertical
document.querySelector('.page__content').scrollLeft = 140; // for horizontal
}
</script>
<div style="position:absolute;width: 200%;height: 10px;"></div>
<span><br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</span>
</div>
</ons-page>
</ons-navigator>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script>
<script>
ons.bootstrap();
//# sourceURL=pen.js
</script>
</body></html>
这篇关于外部javascript无法与onsen framewowrk一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
