Question

好的，我看过这个教程http://css-tricks.com/dynamic-page-replacing-content/，实际上非常酷！我的问题是流量，我有一个页面，不仅有内容，还有特定的JavaScript内容，和CSS。有没有办法动态加载这些文件，这是正确的吗？如果我在页面上有硬编码，我将如何加载该css / js脚本呢？

提前致谢。

[编辑]

一些代码：

<html>
<head>
<script type="text/javascript" src="..."></script>
<script type="text/javascript">
$(document).ready(
    alert('the document has finished loading!!');
    // do form validation and send
)
</script>
</head>
<body>
Please Full the necesary (*) Fields
<form method="post" action="testing.php" id="test" name="test">
    (*)<input type="text" name="fullname" />
    <input type="submit" value="Send" />    
</form>
</body>
</html>

假设我想要动态加载该页面并加载验证和相关的javascript放在标题上。应该加载文件重定标头？我怎么知道哪一个已经装好了？

感谢您的回答！

“我猜他的意思是硬编码，静态。 - Utkanos” - 编辑

Answer 1

您可以通过更改href属性动态更改CSS样式表。也可以通过将脚本self加载到div中或通过将脚本src写入它来动态加载Javascript。

这是一个简单的例子：

CSS 1：

body {
    background: black;
    color: #333;
}

CSS 2：

body {
    background: red;
    color: white;
}

HTML：

<html>
    <head>
        <title>Test page</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

        <link href="/includes/css/test1.css" rel="stylesheet" type="text/css" />  
    </head>

    <body>
        <h1>TEST!!!!!</h1>
        <div id="code"></div>
        <input type="button" id="but" value="click!" />

        <script>
            var css = 1;

            $('#but').click(function() {
                if(css == 1) {
                    css = 2;
                } else {
                    css = 1;
                }

                $('link').attr('href', '/includes/css/test' + css + '.css');               

                //test();
                test2();
            });

            function test2() {
                $('#code').html("<script>alert(\"It works!!!\");<\/script>");

                //Or parse the src 
                //$('#code').html("<script src=\"js/your_js_file.js"><\/script>")
            }
        </script>
    </body>
</html>

因此，在加载页面后将CSS和Js加载到页面中是可行的。

希望这有帮助！

动态html页面导航

1 个答案: