外面 javascript 不适用于温泉框架

Question

我正在使用 onsen.ui 框架但是当我包含任何脚本时他不工作我如何接受在框架

中包含 javascript

  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>

Answer 1

您遇到的问题不是 javascript 不工作，而是您只是试图滚动错误的元素。

Onsen UI 的 ons-page 元素创建了自己的内容元素 (div.page__content)，用于滚动目的。所以你可以滚动那个元素。但是它没有方法 scrollTo，您可以像这样设置 scrollTop 和 scrollLeft 属性：

document.querySelector('.page__content').scrollTop = 140; // for vertical
document.querySelector('.page__content').scrollLeft = 140; // for horizontal

如果您将此用于 scrollWin 功能，您会没事的。

另请注意 - 如果您想使用水平滚动，您应该有一些更宽的内容，以便您可以实际滚动元素。

出于代码片段的目的，我插入了以下内容：

<div style="position:absolute;width: 200%;height: 10px;"></div>

我想你明白了它的要点。

最后，如果您想在温泉准备就绪时执行某些操作 - 例如，如果您想调用自动滚动功能，您可以这样做：

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 不适用于温泉框架

outside javascript not work with onsen framewowrk

html

javascript

onsen-ui