@InkoGnito123

Не открывается другая страница (webapp telegram)?

В общем, после загрузки страницы не переадресовывает на другую страницу (index.html), если я открою через браузер, то всё работает, но в webapp telegram просто бесконечная загрузка (каждый раз сбрасывается и заново открывается)

webapp.go:
package main

import (
    "fmt"
    "net/http"

    "github.com/gin-gonic/gin"
    "github.com/gin-contrib/cors"
)

func main() {
    r := gin.Default()

    config := cors.DefaultConfig()
    config.AllowOrigins = []string{"https://..."}
    config.AllowMethods = []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"}
    config.AllowHeaders = []string{"Origin", "Content-Length", "Content-Type"}
    r.Use(cors.New(config))

    r.Static("/static", "./static")

    r.LoadHTMLGlob("structure/*") 

    r.GET("/loading", func(c *gin.Context) { 
        c.HTML(http.StatusOK, "loading.html", gin.H{})  
        c.Header("Content-Type", "text/html; charset=utf-8")
    })
    
    r.GET("/index", func(c *gin.Context) {
        c.HTML(http.StatusOK, "index.html", gin.H{}) 
        c.Header("Content-Type", "text/html; charset=utf-8") 
    }) 

    r.GET("/", func(c *gin.Context) {
        c.Redirect(http.StatusMovedPermanently, "/loading")
    })

    r.NoRoute(func(c *gin.Context) {
        c.Redirect(http.StatusMovedPermanently, "/loading")
    })

    err := r.RunTLS(":443", "/etc/letsencrypt/live/...", "/etc/letsencrypt/...")
    if err != nil {
        fmt.Println("Ошибка при запуске webapp:", err)
    }
}


loading.html:
<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>WebPage Бота</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center; 
            height: 100vh;
            background-image: url("/static/image/loading.jpg"); 
            background-size: cover;
            background-repeat: no-repeat; 
            margin: 0; 
        }

        .loading-container {
            text-align: center;
            position: relative;
            height: 100%; 
        }

        .progress-bar {
            width: 80%;
            height: 20px; 
            background-color: #e0e0e0; 
            border-radius: 5px; 
            margin: 20px auto;
            overflow: hidden; 
        }

        .progress-bar-fill {
            height: 100%; 
            background-color: #405cf5; 
            width: 0%; 
            transition: width 0.1s linear; 
        } 

        .telegram-icon {
            position: absolute; 
            bottom: 20px;
            left: 50%; 
            transform: translateX(-50%); 
            width: 100px; 
            height: 100px; 
            cursor: pointer;
        } 
    </style> 
</head> 
<body> 
    <div class="loading-container" id="loading-container"> 
        <h1>WebPage Бота</h1>

        <div class="progress-bar">
            <div class="progress-bar-fill" id="progress-bar-fill"></div> 
        </div> 

        <a href="https://t.me/..." target="_blank">
            <div class="telegram-icon">
                <img src="/static/image/botIcon.jpg" alt="Telegram" width="100" height="100"> 
            </div> 
        </a> 
    </div> 

    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <script>
        function redirectToIndex() {
            Telegram.WebApp.openTelegramLink('/index')
        }

        function showError(message) {
            document.getElementById('loading-container').innerHTML = `
                <img src='/static/image/oleg.jpg' width='320' height='185'/>
                <br>
                <h1>${message}</h1>
            `;
            document.body.style.backgroundImage = 'none';
        }

        function startLoading() {
            let width = 0;
            const interval = setInterval(function() {
                width += 1;
                document.getElementById('progress-bar-fill').style.width = width + '%';

                if (width >= 100) {
                    redirectToIndex();
                    clearInterval(interval);
                }
            }, 30);
        }

        function isTelegramWebAppValid() {
            return (
                window.Telegram &&
                window.Telegram.WebApp &&
                Telegram.WebApp.initData &&
                Telegram.WebApp.initDataUnsafe &&
                Telegram.WebApp.initDataUnsafe.query_id &&
                Telegram.WebApp.initDataUnsafe.user &&
                Telegram.WebApp.initDataUnsafe.auth_date
            );
        }

        if (!window.scriptExecuted) {
            window.scriptExecuted = true;

            if (isTelegramWebAppValid()) {
                Telegram.WebApp.ready();
                Telegram.WebApp.expand();
                startLoading();
            } else {
                showError('Пожалуйста, откройте приложение через Telegram бота @.');
            }
        }
    </script>
</body>
</html>
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ответы на вопрос 1
@cryptoUser
попробуй window.location.href = '/index';
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы