Как я могу маршрутизировать/обслуживать статические файлы с помощью page.js и Apache?

У меня есть маршрутизатор с page.js, который направляет индексную страницу (на '/'), страницы проекта (в '/projects/<projectId>/') и статические (изображения) файлы. Это выглядит, в основном, как это:Как я могу маршрутизировать/обслуживать статические файлы с помощью page.js и Apache?

JavaScript

init: function() { 
    page.base('/'); 
    // IndexPage 
    page('', function (context, next) { 
     displayIndexPage(); 
    }); 
    // ProjectPage 
    page('projects/:project', function (context, next) { 
     displayProjectPage(); 
    }); 
    // image files 
    page(/^.+\.(jpg|png|gif|bmp)$/, function (context, next) { 
     window.location = '/' + context.path; 
    }); 
    // Exit the middleware 
    page(); 
}

В моей /projects/ папке, у меня есть .htaccess файл со следующим:

Баш

Options +FollowSymLinks 
    RewriteEngine On 
    # html5 pushstate (history) support 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_URI} !index 
    RewriteRule ^.*$ ../index.html [QSA,L,NE]

Маршрутизация, как правило, работает правильно. Когда я перехожу к статическому файлу изображения, .htaccess бросает меня за пределы моего одностраничного приложения, и статический файл появляется на экране. Однако, когда я перемещаюсь обратно в своем браузере, я не повторно вводил свое приложение; Изменения URL, но навигации нет, файл изображения остается на экране. Никакое количество popping или pushing оттуда не возвращает меня в мое приложение.

Я не совсем уверен, что я задаю правильный вопрос здесь; не уверен, что это касается обслуживания статических файлов, так же как и для маршрутизации одностраничного приложения ... Я был бы доволен любым ответом, который позволяет page.js выбирать резервную копию на popState.

EDIT: Я освобождаю файлы от своего RewriteRule, потому что мне нужно обслуживать их на страницах, созданных моим приложением. Однако, когда посетитель нажимает на изображение на отображаемой странице, я хотел бы, чтобы браузер просто отображал это изображение без разметки.

источник

2015-03-02 ericsoco

Кроме того, что я делаю неправильно с моими укрепленными блоками коды? Почему подсветка синтаксиса не работает? – ericsoco

О, oops, SO не поддерживает защищенные блоки кода. Слишком привык к GH, я думаю. Thx @ ariful-haque. – ericsoco

Ваша ссылка на [Page.js] (https://visionmedia.github.io/page.js/) не отображается, потому что вы забыли добавить https: // '. – usandfriends

Какое ваше ожидание при нажатии на ссылки на изображение?

При маршрутизации изображений вместо изменения местоположения попробуйте сделать что-то еще с изображением. Загрузите его через AJAX и добавьте его к некоторому элементу или так в соответствии с вашим ожиданием.

// image files 
page(/^.+\.(jpg|png|gif|bmp)$/, function (context, next) { 
    // Culprit 
    // window.location = '/' + context.path; 

    showImage('/' + context.path); 
});

Редактировать

использовать не page.js ссылки на изображения, чтобы браузер непосредственно обрабатывать его. Example.

Ссылка jsfiddle не работает должным образом из-за маршрутизации на стороне сервера, но если вы скопируете ее обратно на свой сервер, она будет работать.

источник

2015-03-20 05:24:17

Мое предположение заключается в том, что файл изображения отображается в браузере в собственном формате отображения изображений в браузере. Это происходит, но пользователь больше не работает в приложении page.js. При переходе назад URL-адрес * должен быть получен Apache и должен быть перенаправлен обратно в /index.html, где page.js должен выполнить резервное копирование и перенаправить зрителя соответственно. Вместо этого навигационное событие просто проглатывается, ничего не меняется, кроме URL-адреса. – ericsoco

Хорошо, в этом случае для jpgs не используйте page.js. Используйте прямые ссылки для изображений. Прямо сейчас page.js однажды меняет URL-адрес, и ваш javascript снова меняет его, добавляя 2 URL-адреса в историю. Когда вы нажимаете «назад» со страницы изображения, вы переходите на страницу js route, которая перенаправляет изображение снова, и вы находитесь в этом цикле. –

Я думаю, что ты прав! Я думал, что вызов 'window.location() будет выходить за пределы page.js, но то, что вы описываете, звучит логично. Мне просто нужно выяснить, как избежать полной маршрутизации страницы. Js для данного шаблона URL. Какие-нибудь советы с головы? Я не могу проверить прямо сейчас. Также было бы здорово, если бы вы могли отредактировать свой ответ на этот эффект, чтобы я мог принять его, если он работает. – ericsoco

Если я понимаю, каков ваш конечный результат, это можно сделать с помощью простого наложения, содержащего ваше изображение, которое охватывает все окно. Затем поймайте событие popstate и удалите оверлей. JQuery не требуется, только для краткости.

jsfiddle Примечание: ваш URL-адрес браузера не изменится, поскольку скрипт находится внутри iframe.

Редактировать: Stackoverflow устанавливает начало координат в null, поэтому проверьте пример jsfiddle для рабочего примера.

var url = 'http://indianapublicmedia.org/stateimpact/files/2013/01/apple-image-300x300.jpg'; 
 

 
$('.image').click(function() { 
 
    $('body').append('<div id="overlay"><img src="' + url + '"></div>').appendTo('body'); 
 
    history.pushState(null, null, 'http://stackoverflow.com/imageURL'); 
 
}); 
 

 
window.onpopstate = function(){ 
 
    $('#overlay').remove(); 
 
};

#overlay { 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 100; 
 
    position: fixed; 
 
    background: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body>Some content here 
 
    <img src="http://indianapublicmedia.org/stateimpact/files/2013/01/apple-image-300x300.jpg" class='image'> 
 
</body>

источник

2015-03-22 19:26:51 user33946

Спасибо - я могу сделать что-то вроде этого (похоже на то, что рекомендовал @Abhilash S Hebbar), но я бы предпочел просто позволить браузеру обрабатывать изображения изначально ... – ericsoco

Как я могу маршрутизировать/обслуживать статические файлы с помощью page.js и Apache?

ответ

Смежные вопросы