Код, работающий на jsfiddle.сеть не работает локально

ProgramBox

Код, работающий на jsfiddle.сеть не работает локально

Post author:admin
Запись опубликована:28 сентября, 2022
Post category:Вопросы по программированию

#javascript #jquery #mediawiki #jsfiddle

Вопрос:

Я хотел бы поиграть локально с этим кодом, который я нашел. Чтобы представить его быстро, код воспроизводит интерфейс страницы Википедии в минималистичном стиле. Я попробовал код в скобках, без каких-либо изменений, кроме базовых тегов (<html>, <script>,<body> ) и ссылки на библиотеку jquery в той же версии, что и мини-вики-код, вот код, который я использую :

 <!DOCTYPE html>


<html>
    <head>  
        <title> example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    
    <body>
        <div class='container'>
            <h1 id="title">MiniWiki</h1>
        <div id="content"></div>
        </div>
        
        <script>
            var titleElem = document.getElementById('title');
            var contentElem = document.getElementById('content');
            var stylesheetElem = document.getElementById('style');
            function extractTitle(title) {
                return title.replace(/(^./)|(#.*$)/g, '').replace(/_/g, ' ');
            }
            function loadPage(title) {
                var url = 'https://en.wikipedia.org:443/api/rest_v1/page/html/'   encodeURIComponent(title);
                return $.ajax(url).then(function (data) {
                    var doc = (new DOMParser()).parseFromString(data, 'text/html');
                    // Use mediawiki content stylesheet
                    $(stylesheetElem).remove();
                    stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');
                    $('head').append(stylesheetElem);
                    // Update title and content
                    $(titleElem).text(doc.title.replace(/^User:Cscott//, '').replace(/_/g, ' '));
                    var $content = $(contentElem).empty();
                    Array.from(doc.body.attributes).forEach(function (attr) {
                        $content.attr(attr.name, attr.value);
                    });
                    $content.append(Array.from(doc.body.children));
                    // Handle redirects
                    $('link[rel="mw:PageProp/redirect"]').replaceWith(function() {
                        return $('<a rel="mw:WikiLink">REDIRECT</a>').attr('href', $(this).attr('href'));
                    });
                    // Add click handler to wiki links
                    $('a[rel="mw:WikiLink"]', $content).click(function (e) {
                        var newTitle = extractTitle($(e.currentTarget).attr('href'));
                        History.pushState(null, newTitle, "?title=" encodeURIComponent(newTitle));
                        return false; // Don't use normal href handler
                    });
                });
            }
            // Make the back button work
            History.replaceState(null, '', ''); // Ensure a state change later
            $(window).on('statechange', function() {
                loadPage(History.getState().title);
            });
            // Load the start page
            History.replaceState(null, 'User:Cscott/MiniWiki', '');
        </script>


    </body>
</html>

При попытке выполнить этот код в консоли постоянно появляется следующая ошибка :

mini-wiki.html:51 Неперехваченная ошибка типа: History.replaceState не является функцией

Я заметил, что, заменив History.replaceState на history.replaceState, я мог бы избавиться от ошибки, но тогда у меня не осталось ошибок в консоли, и отображается только содержимое <h1> .

Есть ли какие-либо причины, по которым этот код работает безупречно на jsfiddle.сеть, а не локально?

Ответ №1:

Я попытался удалить jquery.history.js файл и заменить его на тот jquery , который вы импортируете в своем теге script, и он выдает ошибку, о которой вы упоминаете.

Я думаю, вам нужно включить jquery.history.js файл, который был включен в jsfiddle.

Я бы рекомендовал вам попробовать импортировать следующую строку в ваш тег head:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled-uncompressed/html4 html5/jquery.history.js"></script>

Ответ №2:

используя приведенные выше ответы, я заставил это работать, связав недостающие скрипты и css, и теперь у меня есть ожидаемый результат, вот полный код :

 <!DOCTYPE html>


<html>
    <head>  
        <title> example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
        <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
       
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.32.2/es6-shim.min.js"> </script>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled-uncompressed/html4 html5/jquery.history.js"> </script>
        
    </head>

    
    <body>
        <div class='container'>
            <h1 id="title">MiniWiki</h1>
        <div id="content"></div>
        </div>
        
        <script>
            var titleElem = document.getElementById('title');
            var contentElem = document.getElementById('content');
            var stylesheetElem = document.getElementById('style');
            function extractTitle(title) {
                return title.replace(/(^./)|(#.*$)/g, '').replace(/_/g, ' ');
            }
            function loadPage(title) {
                var url = 'https://en.wikipedia.org:443/api/rest_v1/page/html/'   encodeURIComponent(title);
                return $.ajax(url).then(function (data) {
                    var doc = (new DOMParser()).parseFromString(data, 'text/html');
                    // Use mediawiki content stylesheet
                    $(stylesheetElem).remove();
                    stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');
                    $('head').append(stylesheetElem);
                    // Update title and content
                    $(titleElem).text(doc.title.replace(/^User:Cscott//, '').replace(/_/g, ' '));
                    var $content = $(contentElem).empty();
                    Array.from(doc.body.attributes).forEach(function (attr) {
                        $content.attr(attr.name, attr.value);
                    });
                    $content.append(Array.from(doc.body.children));
                    // Handle redirects
                    $('link[rel="mw:PageProp/redirect"]').replaceWith(function() {
                        return $('<a rel="mw:WikiLink">REDIRECT</a>').attr('href', $(this).attr('href'));
                    });
                    // Add click handler to wiki links
                    $('a[rel="mw:WikiLink"]', $content).click(function (e) {
                        var newTitle = extractTitle($(e.currentTarget).attr('href'));
                        History.pushState(null, newTitle, "?title=" encodeURIComponent(newTitle));
                        return false; // Don't use normal href handler
                    });
                });
            }
            // Make the back button work
            History.replaceState(null, '', ''); // Ensure a state change later
            $(window).on('statechange', function() {
                loadPage(History.getState().title);
            });
            // Load the start page
            History.replaceState(null, 'User:Cscott/MiniWiki', '');
        </script>


    </body>
</html>

Метки: Код, работающий на jsfiddle.сеть не работает локально