javascript - 多页网站如何转变单页模式?
大家讲道理
大家讲道理 2017-04-11 13:17:45
[JavaScript讨论组]

网站原本是多页结构的,现在想弄成单页结构,
现在是多页结构:左边一个导航,右边一个内容区。
想换成单页结构:就是点击导航,右边内容区动态加载以前对应的HTML

请问有什么思路?现在只做到了换HTML结构(ajax获取html,然后正则获取需要的片段),还有的难点是不知道怎么在换内容时,执行对应的JS文件与CSS文件

求指导,简单说个思路,关键词什么的也行。

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(3)
PHPz

一般都是用框架写的,比如angular,在配置文件里写好每个页面对应的js和css,再配合路由,当跳转到某个页面时就会自动执行配置文件里对应的代码了。

'classaction':{
            path: [
                'classaction',
                'classaction/:classid',
                'classaction/:action/:id'
            ],
            viewUrl: 'class/classaction',
            scripts: [
                '/dist/js/core/utils.min',
                'class/classaction',
                '/assets/js/plugins/videoJs/5.4.5/video.min'
            ],
            styles:[
                'classaction'
            ]
        },
怪我咯

css:直接把url设置到link标签上插入head里面就可以加载.
js:需要通过ajax将js文件的内容读取过来再通过eval方法进行执行.

window['eval'].call(window, script)

或使用其他框架:

   $('#container').load('内部页面地址');
黄舟

jquery 用 ajax 获取 html 时,也可以获得到 link 和 script 标签,然后添加到你需要的容器里就好了。
另外注意路径。

var $el = $(".panel"); // 你需要放的容器

$.ajax({
    type: "get",
    url: "a.html",
    success: function(html) {
        $el.html(html);
    },
    error: function() {
        //...
    }
});

直接在 a.html 里面放 script 标签和 link 标签就好了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号