如果我包含标题，CSS / JS将无法工作
[英]CSS/JS won't work if I include the header
问题描述
Here is my index.html file 
这是我的index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>
If I copy-paste the content of header.html page after the body, then everything works fine. 如果我在主体后面复制粘贴header.html页面的内容，那么一切正常。
when I tried to include the header.html page using .load() function then the CSS won't work properly. 当我尝试使用.load()函数包含header.html页面时，CSS将无法正常工作。
Here is the online sample codepen 这是在线示例代码集
if I include the content of div="inc" from an external file like header.html than drop-down menu will overlap each other. 如果我从header.html这样的外部文件中包含div="inc"的内容，则下拉菜单会相互重叠。
5 个解决方案
解决方案1
1 已采纳 2016-09-10 09:54:03
Hope this helps. 希望这可以帮助。
Your scripts.js file contains 您的scripts.js文件包含
$(window).load(function(){
"use strict";
// Align Elements Vertically
alignVertical();
alignBottom();
$(window).resize(function(){
alignVertical();
alignBottom();
});
// Isotope Projects
});
The scripts.js file you have provided is trying to add some styling to the header.html . 您提供的scripts.js文件正在尝试向header.html添加一些样式。
but it's not doing the expected behaviour because the scripts.js file is loading before the header.html file. 但它没有执行预期的行为，因为scripts.js文件在header.html文件之前加载。
Just add this at the end after your header content 只需在标题内容后添加此内容即可
<script src=assets/js/scripts.js></script>
This will let the header.html content load first and than scripts.js 这将使header.html内容首先加载而不是scripts.js
Also here is the github repo code structure 这里还有github repo代码结构
https://github.com/siddhartharora02/jsLoad https://github.com/siddhartharora02/jsLoad
解决方案2
0 2016-09-07 11:13:51
Try this 试试这个
<link href="../assets/css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/smooth-scroll.min.js"></script>
<script src="../assets/js/scripts.js"></script>
解决方案3
0 2016-09-07 11:22:47
Try using like this, 尝试使用这样的，
$(document).ready(function() {
$.get('header.html').success(function(data){
var headerHTML = data;
$('#inc').html(headerHTML);
});
});
解决方案4
0 2016-09-07 11:31:04
For your original issue, 对于您的原始问题，
If you want to include html content dynamically, here is a method to do it, 如果你想动态地包含html内容，这里有一个方法，
HTML, HTML，
<link data-include="includes/header.html">
JS, JS，
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
Hope this will help! 希望这会有所帮助！
Try this, 试试这个，
Now you can include any partial content as you want. 现在，您可以根据需要添加任何部分内容。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<link data-include="header.html">
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
});
</script>
</body>
</html>
解决方案5
0 2016-09-07 11:37:34
How about this: 这个怎么样：
Instead of using a load method, use an iframe 而不是使用加载方法，使用iframe
<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>
Edit 编辑
<iframe id="inc" src="header.html" class="hidden"></iframe>
css CSS
iframe.hidden {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: hidden;
}
iframe.hidden.load {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: block;
}
JS JS
!!! ！ Here trigger means the trigger when you want it to load such as onClick, onMouseover, etc !!! 这里触发器意味着你希望它加载时的触发器，如onClick，onMouseover等！
Requires jQuery 需要jQuery
$('iframe.hidden').trigger(function() {
$(this).addClass('load');
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.