亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何解決：HTML 模板必須包含單個根元素

如何解決：HTML 模板必須包含單個根元素

墨色風雨 2021-11-25 19:07:34
我正在嘗試將 onsen navigator 與多個“.html”文件一起使用，但我遇到了同樣的錯誤，無論我嘗試過什么我的場景-萬維網/腳本索引.html主頁.html我想從 index.html 轉到 home.html錯誤：Uncaught (in promise) Error: [Onsen UI] HTML template must contain a single root element    at Object.Q.throw (onsenui.min.js:2)    at Object.Q.createElement (onsenui.min.js:2)    at onsenui.min.js:2我的 index.html：    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>    <script src='scripts/loginScript.js' type='text/javascript'></script>    <link rel="stylesheet" href="style.css">    <title>Tu Psicologa de Cabecera</title></head><body>    <ons-navigator id="navigator" page="index.html"></ons-navigator>        <ons-template id="index.html">            <ons-page id="index">                <img class="imagenLogo" src="https://i.imgur.com/cq7BbWn.png">                <ons-card class="loginCard">                    <ons-input id="userLogin" modifier="underbar" placeholder="Usuario" style="width: 100%; margin-top: 8px; margin-bottom: 8px;" float></ons-input>                    <ons-input id="passLogin" modifier="underbar" placeholder="Contrase?a" type="password" style="width: 100%; margin-top: 8px; margin-bottom: 8px;" float></ons-input>                    <ons-button class="loginButton" onclick="loginNomral()">ENTRAR</ons-button>                    <ons-button class="loginFacebookButton">ENTRAR CON FACEBOOK</ons-button>                    <label class="labelRegister">REGISTRARME</ilabel>                </ons-card>            </ons-page>        </ons-template>    <script type="text/javascript" src="cordova.js"></script></body>
查看完整描述

3 回答

?
肥皂起泡泡

TA貢獻1829條經驗 獲得超6個贊

解決方案很簡單，幾個小時后，我刪除了所有的 html 格式并保留了標簽。


由此：


<!DOCTYPE html>

<html>

   <head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">


    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>


    <link rel="stylesheet" href="style.css">

    <title></title>

</head>

<body>

    <ons-page id="home">

        <ons-toolbar>

            <div class="left"><ons-back-button>Page 1</ons-back-button></div>

        </ons-toolbar>


        <p>This is the second page.</p>

    </ons-page>

</body>

</html>

對此：


<ons-page id="home">

    <ons-card class="loginCard">

        <ons-input id="userLogin" modifier="underbar" placeholder="Usuario" style="width: 100%; margin-top: 8px; margin-bottom: 8px;" float></ons-input>

        <ons-input id="passLogin" modifier="underbar" placeholder="Contrase?a" type="password" style="width: 100%; margin-top: 8px; margin-bottom: 8px;" float></ons-input>


        <ons-button class="loginButton" onclick="logintest()">ENTRAR</ons-button>

        <ons-button class="loginFacebookButton">ENTRAR CON FACEBOOK</ons-button>

        <label class="labelRegister">REGISTRARME</ilabel>

    </ons-card>

</ons-page>


查看完整回答
反對 回復 2021-11-25
?
BIG陽

TA貢獻1859條經驗 獲得超6個贊

Onsen UI navigator 使用您指定頁面內容的模板，您無需創建不同的 html 文件來指定不同的頁面


document.addEventListener('init', function(event) {

  var page = event.target;


  if (page.id === 'page1') {

    page.querySelector('#push-button').onclick = function() {

      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});

    };

  } else if (page.id === 'page2') {

    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;

  }

});

   <!DOCTYPE html>

   <html>

   <head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">


    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>


    <link rel="stylesheet" href="style.css">

    <title>App</title>

</head>

<body>

    <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>


<template id="page1.html">

  <ons-page id="page1">

    <ons-toolbar>

      <div class="center">Page 1</div>

    </ons-toolbar>


    <p>This is the first page.</p>


    <ons-button id="push-button">Push page</ons-button>

  </ons-page>

</template>


<template id="page2.html">

  <ons-page id="page2">

    <ons-toolbar>

      <div class="left"><ons-back-button>Page 1</ons-back-button></div>

      <div class="center"></div>

    </ons-toolbar>


    <p>This is the second page.</p>

  </ons-page>

</template>

</body>

</html>


查看完整回答
反對 回復 2021-11-25
?
30秒到達戰場

TA貢獻1828條經驗 獲得超6個贊

從你的代碼看來，你</head>沒有開口<head>


但主要問題是你不能有 2 個標簽作為根，這意味著你需要用一個<html></html>標簽包裝它們


像這樣：


<html>

   <head>

      <title>Page Title</title>

   </head>

   <body>

      <h1>My First Heading</h1>

      <p>My first paragraph.</p>

   </body>

</html>


查看完整回答
反對 回復 2021-11-25
  • 3 回答
  • 0 關注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號