Fatal编程技术网

Javascript 合并HTML页面

javascript jquery html css

Javascript 合并HTML页面,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我有一个页面是先加载的。这个页面有一些jQuery，它在图像和文本中淡出，在设定的时间后淡出。然后该页将更改为下一页 问题是，当它更改页面时，背景会变为白色，因为它正在加载新页面。顺便说一句，我使用的是完全相同的背景图像 因此，我想要么解决以下问题，因为它们是我能想到的全部 选项1）有一个脚本，可以在加载主体之前加载背景图像。唯一的问题是，我在body标签中设置背景 选项2）以某种方式将第一页合并到第二页，我认为这太难了 以下是第一页的jQuery，仅供参考： var del

所以我有一个页面是先加载的。这个页面有一些jQuery，它在图像和文本中淡出，在设定的时间后淡出。然后该页将更改为下一页

问题是，当它更改页面时，背景会变为白色，因为它正在加载新页面。顺便说一句，我使用的是完全相同的背景图像

因此，我想要么解决以下问题，因为它们是我能想到的全部

选项1）有一个脚本，可以在加载主体之前加载背景图像。唯一的问题是，我在body标签中设置背景<代码>

选项2）以某种方式将第一页合并到第二页，我认为这太难了

以下是第一页的jQuery，仅供参考：

        var delay = 6500;
        $('#pre_title').hide(0).delay(500).fadeIn(2000);
        $('#loader_logo').hide(0).delay(500).fadeIn(2000);
        $('#pre_title').delay(500).fadeOut(2000);
        $('#loader_logo').delay(500).fadeOut(2000);
        setTimeout(function(){ window.location.href = "ls.php"; }, delay );
这里是jQuery，它在第二页的HTML中逐渐消失

    function preLoader() {
        $("html").hide(0).delay(500).fadeIn(1000);
    }
这里是一个简单的、普通的JS概念验证实现，使用iFrame让您开始

    <html>

    <head>
        <style>
            body {background: rgba(255, 0, 0, .2);font-size:4em;}
        </style>
        <script>

        </script>
    </head>

    <body>
        this is page 0...this is page 0...this is page 0...<br />
        this is page 0...this is page 0...this is page 0...<br />
        this is page 0...this is page 0...this is page 0...<br />
        this is page 0...this is page 0...this is page 0...<br />
        this is page 0...this is page 0...this is page 0...<br />
    </body>

    </html>



正文{背景：rgba（255,0,0,2）；字体大小：4em；}
这是第0页…这是第0页…这是第0页…

这是第0页…这是第0页…这是第0页…

这是第0页…这是第0页…这是第0页…

这是第0页…这是第0页…这是第0页…

这是第0页…这是第0页…这是第0页…



正文{背景：rgba（0,255,0,2）；字体大小：4em；}
这是第1页…这是第1页…这是第1页…

这是第1页…这是第1页…这是第1页…

这是第1页…这是第1页…这是第1页…

这是第1页…这是第1页…这是第1页…

这是第1页…这是第1页…这是第1页…



正文{背景：rgba（0,025,2）；字体大小：4em；}
这是第2页…这是第2页…这是第2页…

这是第2页…这是第2页…这是第2页…

这是第2页…这是第2页…这是第2页…

这是第2页…这是第2页…这是第2页…

这是第2页…这是第2页…这是第2页…



身体{
背景图像：url（'http://stmed.net/sites/default/files/stone-wallpapers-28059-3653690.jpg');
位置：绝对；顶部：0，左侧：0；；高度：100%；宽度：100%；
}
#pFrame0，#pFrame1{位置：绝对；顶部：20px，左侧：20px；不透明度：1；高度：100%；宽度：100%；}
#pFrame1{opacity:0；}
形式{位置：绝对；顶部：5px；左侧：5px；z索引：3；}
var dir='1file:///home/richard/Documents/code/';
变量页列表=[
“page0.html”、“page1.html”、“page2.html”
];
函数get（eId）{returndocument.getElementById（eId）；}；
var nextPageIdx=0；
函数运行（）{
下一代++
nextPageIdx=（nextPageIdx==pageList.length）？0:nextPageIdx；
加载页面（页面列表[nextPageIdx]）；
};
函数加载页（uri）{
var current=（1==1*get（'pFrame0'）.style.opacity）？'pFrame0'：'pFrame1'；
var next=（1==1*get（'pFrame0'）.style.opacity）？'pFrame1'：'pFrame0'；
setTimeout（“交换”（“+uri+”，“+current+”，“+next+”），crossFade（“+current+”，“+next+”））；
};
函数交换（uri、当前、下一个）{
get（current）.src=get（next）.src；
获取（当前）.style.opacity=1；
setTimeout（“get（“+next+”）.style.opacity=0；”，50）；
setTimeout（“get（“+next+”）.src=“+uri+”；”，100）；
};
函数交叉衰减（当前、下一个、毫秒）{
如果（'undefined'==毫秒的类型）毫秒=5000；
var增量=100/毫秒；
获取（当前）.style.opacity=1；
获取（下一个）.style.opacity=0；
对于（变量i=0；i
为什么要替换整个html标记？你不能在你的身体里装一些主要的东西吗？（不包括bg图像）使用ajax加载内容并不困难。真的不清楚你想在更高的层次上做什么level@ItayB，这正是我要建议的。只需确保下一页所需的所有Javascript/CSS都已包含在原始页面中。这些页面的资源量有多大？如果它们都相当轻，我认为合并它们没有问题。假设这两个页面都存储在单独的div中，提取出诸如页眉、页脚和背景之类的内容。只要有一个点击事件，它抓取当前活动的div并用任何动画隐藏它，同时用任何动画取消隐藏另一个div。 
<html>

<head>
    <style>
        body {background: rgba(0, 255, 0, .2);font-size:4em;}
    </style>
    <script>

    </script>
</head>

<body>
    this is page 1...this is page 1...this is page 1...<br />
    this is page 1...this is page 1...this is page 1...<br />
    this is page 1...this is page 1...this is page 1...<br />
    this is page 1...this is page 1...this is page 1...<br />
    this is page 1...this is page 1...this is page 1...<br />
</body>

</html>

    <html>

    <head>
        <style>
            body {background: rgba(0, 0, 255, .2);font-size:4em;}
        </style>
        <script>

        </script>
    </head>

    <body>
        this is page 2...this is page 2...this is page 2...<br />
        this is page 2...this is page 2...this is page 2...<br />
        this is page 2...this is page 2...this is page 2...<br />
        this is page 2...this is page 2...this is page 2...<br />
        this is page 2...this is page 2...this is page 2...<br />
    </body>

    </html>


<html>

<head>
    <style>
        body {
            background-image:url('http://stmed.net/sites/default/files/stone-wallpapers-28059-3653690.jpg');
            position:absolute;top:0,left:0;;height:100%;width:100%;
        }
        #pFrame0, #pFrame1 {position:absolute;top:20px,left:20px;opacity:1;height:100%;width:100%;}
        #pFrame1 {opacity:0;}
        form {position:absolute;top:5px;left:5px;z-index:3;}
    </style>
    <script>
        var dir = 'file:///home/richard/Documents/code/';
        var pageList = [
            'page0.html', 'page1.html', 'page2.html'
        ];

        function get(eId) {return document.getElementById(eId);};

        var nextPageIdx=0;
        function run() {
            nextPageIdx++
            nextPageIdx = (nextPageIdx == pageList.length)?0:nextPageIdx;
            loadPage(pageList[nextPageIdx]);
        };

        function loadPage(uri) {
            var current = (1 == 1*get('pFrame0').style.opacity)?'pFrame0':'pFrame1';
            var next = (1 == 1*get('pFrame0').style.opacity)?'pFrame1':'pFrame0';
            setTimeout("swapPages('" + uri + "','" + current + "','" + next + "'), crossFade('" + current + "', '" + next + "')");
        };

        function swapPages(uri, current, next) {
            get(current).src = get(next).src;
            get(current).style.opacity = 1;
            setTimeout("get('" + next + "').style.opacity = 0;", 50);
            setTimeout("get('" + next + "').src = '" + uri + "';", 100);
        };

        function crossFade(current, next, msecs) {
            if ('undefined' == typeof msecs) msecs = 5000;
            var delta = 100/msecs;
            get(current).style.opacity = 1;
            get(next).style.opacity = 0;
            for (var i = 0; i < msecs/100; i++) {
                setTimeout("get('" + current + "').style.opacity = (1*get('" + current + "').style.opacity) - " + delta, i*msecs/100);
                setTimeout("get('" + next + "').style.opacity = (1*get('" + next + "').style.opacity) + " + delta, i*msecs/100);
            }
            return msecs;
        };
    </script>
</head>

<body>
    <iframe id="pFrame0" src="file:///home/richard/Documents/code/page0.html"></iframe>
    <iframe id="pFrame1" src="file:///home/richard/Documents/code/page1.html"></iframe>
    <form>
        <input type="button" value="load next page" onclick="run();" />
    </form>
</body>

</html>