Question

我设置了page.js的路由器，用于路由索引页（'/'），项目页面（'/projects/<projectId>/'）和静态（图像）文件。它基本上看起来像这样：

的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文件，其中包含以下内容：

的bash

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

路由通常正常工作。当我导航到静态图像文件时，.htaccess将我从单页应用程序中删除，静态文件出现在屏幕上。但是，当我在浏览器中导航时，我不会重新进入我的应用程序; URL更改，但没有导航，图像文件仍保留在屏幕上。没有任何弹出或推动状态从那里让我回到我的应用程序。

我不完全确定我在这里问正确的问题;不确定这是关于提供静态文件和路由单页应用程序...我会满意任何允许page.js在popState上选择备份的答案。

编辑：我正在免除RewriteRule中的文件，因为我需要在我的应用呈现的页面中提供这些文件。但是，当访问者点击渲染页面中的图像时，我希望浏览器只显示该图像，而不显示标记。

Answer 1

单击图像链接时您的期望是什么？

在为图片制作路线时，请尝试使用图片执行其他操作，而不是更改位置。通过AJAX加载它并根据您的期望将其附加到某个元素。

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

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

修改

对图像使用非page.js链接以允许浏览器直接处理它。 Example。

由于服务器端路由，jsfiddle链接无法正常工作，但如果您将其复制回服务器，则可以正常工作。

Answer 2

如果我理解您想要的最终结果，可以使用包含覆盖整个窗口的图像的简单叠加来完成。然后捕获popstate事件并删除叠加层。 JQuery不是必需的，只是为了简洁起见。

jsfiddle注意：您的浏览器网址不会更改，因为小提琴位于iframe中。

编辑：Stackoverflow将原点设置为null，因此请检查jsfiddle以获取工作示例。

＆＃13;

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();
};

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用page.js和Apache路由/提供静态文件？

2 个答案: