外部的JavaScript不是溫泉framewowrk

工作，我是用onsen.ui框架，但是當我有任何腳本，他不工作我該怎麼辦接受包括JavaScript中的框架外部的JavaScript不是溫泉framewowrk

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>

來源

2016-09-22 Jack King

我推薦從教程開始：http://tutorial.onsen.io/?framework=vanilla&category=Reference&module=page，因爲你是將代碼與您的標記混合在一起，不應該這樣做，這是它沒有被編譯的原因。 – Munsterlander

我不明白請解釋更多@Munsterlander –

你遇到的問題不是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>

來源

2016-09-25 20:08:50

我想在中使用javascript工作，但他只在中工作......請給我解決方案@llia yatchev –

而不是將腳本放在' ons-template'，你可以爲'ons-page'標籤賦予一個類似'的id，然後執行'document.addEventListener（function（e）{if（e.target.id = =「myPage」）...}）''哪裏'...'是你的特定頁面的代碼:) –

我會理解jsfiddl請求@llia Yatchev –

外部的JavaScript不是溫泉framewowrk

回答

相關問題