Fatal编程技术网
  • javascript/
  • Javascript htaccess重写条件将css和js文件更改为索引页内容

Javascript htaccess重写条件将css和js文件更改为索引页内容

javascript html ajax .htaccess

Javascript htaccess重写条件将css和js文件更改为索引页内容,javascript,html,ajax,.htaccess,mime,Javascript,Html,Ajax,.htaccess,Mime,我最近读完了关于PHP MVC的书，我想制作一个MVC的ajax版本，但是我在MIME类型方面遇到了问题。我试图做的是将所有服务器调用重定向到index.html页面，因此，如果用户转到一个不存在的页面，该页面将加载索引页面，然后ajax可以使用uri来完成这项工作 没有htaccess文件，一切都可以正常工作，但是如果没有注释，我会发现浏览器无法读取CSS、JS和任何链接图像，因为根据控制台，MIME类型设置为HTML [编辑] 在fiddler中进一步检查后，浏览器似乎正在发送index.h

我最近读完了关于PHP MVC的书，我想制作一个MVC的ajax版本，但是我在MIME类型方面遇到了问题。我试图做的是将所有服务器调用重定向到index.html页面，因此，如果用户转到一个不存在的页面，该页面将加载索引页面，然后ajax可以使用uri来完成这项工作

没有htaccess文件，一切都可以正常工作，但是如果没有注释，我会发现浏览器无法读取CSS、JS和任何链接图像，因为根据控制台，MIME类型设置为HTML

[编辑]

在fiddler中进一步检查后，浏览器似乎正在发送index.html文件，而不是CSS和JavaScript文件，因此我似乎需要能够在CSS或JS文件的情况下做出例外。但我认为这就是在htaccess文件中重写cond-f | |-d的目的

从上一次编辑中，我发现我可以对rewriteCond做一个例外，允许CSS和JS文件通过。但是现在ajax调用中使用的PHP文件显示了HTML内容。。。我对htaccess文件所做的更改如下

RewriteEngine On
RewriteCond &{REQUEST_FILENAME} !-f
RewriteCond &{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !css$
RewriteCond %{REQUEST_URI} !js$
RewriteCond %{REQUEST_URI} !php$
RewriteRule (.*) index.html [L]
[/编辑]

以下是我正在测试的内容，您可以在本地主机上运行这些内容

谢谢你的帮助

安德鲁

htaccess

index.html

main.js

one.php

2.php

3.php

我想出了解决办法。现在发生的事情是，我的css和js文件是相对的，所以当我使用两级深的uri时，它将重写相对路径，以包含uri的第一部分。例如，我的url有两个深度，用于选择正确的类和应用正确的方法

www.website.com/className/method

我的css和js地址采用类名，因此在本例中，它不是查看顶部文件夹href=style.css，而是采用类名并将其前置到不存在的相对字符串eg href=className/style.css。我最初的解决方法是使用if语句检查uri的分解计数。但更好的解决方案是在htaccess文件中这样做

RewriteEngine On
# rewrite the css and js files if they have the className prepended to them.
RewriteCond %{REQUEST_URI} ^(.+)\/(.+)\.(css|js)$ [NS]
RewriteRule ^(.+)\/(.+)\.(css|js)$ $2.$3 [L]

# rewrite the uri to a get superglobal
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l

RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]
开发人员工具仍然显示错误的文件路径，但是提供了正确的文件，所以这不是什么大问题

希望这能帮助某人避免我所经历的头痛问题

“我的css和js文件是相对的，所以当我使用两级深的uri时，它会重写相对路径以包含uri的第一部分”—这不是服务器端重写的工作方式—这只是客户端解析相对路径的方式。通过在这些路径前面加上/已经说过很多次了，我们可以通过链接到域根来简单地反驳这一点…很抱歉，我不知道，在搜索结果中看不到它。我试试看。谢谢你的回复。刚刚尝试了你的建议@CBroe，但没有效果。这个例子只是帮助回答这个问题的一个例子。我制作的是一个单页应用程序，它可以在mvc模式下使用php访问网站上的任何地方，然后一旦网站加载ajax，它将处理其余的页面请求。 
<html>
    <head>
        <meta charset="utf-8">
        <title>ajax mvc test</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
         <nav>
            <ul>
                <li><a href="one" class="links link1">one</a></li>
                <li><a href="two" class="links link2">two</a></li>
                <li><a href="three" class="links link3">three</a></li>
            </ul>
        </nav>
            <div class="main"></div>
     <script type="text/javascript" src="main.js"></script>
    </body>
</html>

body{
    background: #f2f2e6;
    font-family: sans-serif;
}

h2{
    font-size: 2em;
    color: #5a2306;
}

(function(){

    // get the address of the webpage
    var url = window.location.pathname,
        // get the breadcrumb
        urlrep = url.match(/(.*)index\.html/)[1],
        // create regEx to test later
        address = new RegExp(urlrep);

    function update(method){
        // update the history of the webpage 
        var state = {
            data: "this is the data",
            title: "title",
            url: method
        }
        
        updated(method);
        history.pushState(state, state.title, state.url);
    }

    function updated(method){
        // run the ajax call
        if(method !== 'index'){
            console.log("not matched index no ajax call");
            ajaxPost(method + '.php');
        }
    }

    var nav = document.getElementsByClassName('links');
    
    // set event listeners on links
    for (var i = 0; i < nav.length; i++) {
        (function(x){
            nav[x].addEventListener('click', function(e){
                e.preventDefault();
                console.log("textContent: " + e.target.textContent);
                update(e.target.textContent);
            });
        })(i);
    };
    
    // set event listener to browser popstate
    window.addEventListener('popstate', function(e){
        var rep = window.location.pathname.replace(address, '').replace(/\.html/, '');
        console.log("popstate: " + rep);
        updated(rep);
    });
    
    // run the ajax call.
    function ajaxPost(address){
        var ajax,
            main = document.getElementsByClassName('main')[0];
        console.log("address: " + address);
        ajax = new XMLHttpRequest();
        
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 1){
                // sendFunc
                main.innerHTML = "";
            }
            if(ajax.readyState == 4){
                // returnFunc
                main.innerHTML = ajax.responseText;
            }
        }
        
        ajax.open('post', address, true);
        ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        ajax.send();
    }

})();

<?php

echo "<h2>one</h2>";

echo "<p>Its like a symbology of this of your mouth is eating food, from your mouth to your heart, is your freedom and your independence and your identity. The best way to communicate is compatible. Compatible communication is listening with open ears and an open mind, and not being fearful or judgemental about what you're hearing.</p>"; 

echo "<p>Ipsum text generated by<a href=\"http://www.buseyipsum.com\"> Busey Ipsum </a> </p>";
?>

<?php

echo "<h2>two</h2>";

echo "<p>This is just common superficiality. Is thats whats so special about a woman? Superficiality with their face colours? This is just common superficiality. Is thats whats so special about a woman? Superficiality with their face colours?</p>";


echo "<p>Ipsum text generated by<a href=\"http://www.buseyipsum.com\"> Busey Ipsum </a> </p>";
?>

<?php

echo "<h2>three</h2>";

echo "<p>I would like to give you a backstage pass to my imagination. Have you urinated? Have you drained your bladder? Are you free? Because if you havent it will only come out later. I'm giving you some information that your bodily fluids may penetrate your clothing fibre's without warning.</p>";     

echo "<p>Ipsum text generated by<a href=\"http://www.buseyipsum.com\"> Busey Ipsum </a> </p>";
?>

RewriteEngine On
# rewrite the css and js files if they have the className prepended to them.
RewriteCond %{REQUEST_URI} ^(.+)\/(.+)\.(css|js)$ [NS]
RewriteRule ^(.+)\/(.+)\.(css|js)$ $2.$3 [L]

# rewrite the uri to a get superglobal
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l

RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]