整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
于网站的CSS引用我们可以有以下四种方式：
在标签的style属性后添加样式。
// 通过html属性style实现，写在body标签中
<div style="color:green; font-size:18px;">行内式</div>在style标签内添加，加上head标签内部。
// 在style标签中写入css样式，在body中引用
div{ ? color: red; ? font-weight: bold;}
<div>嵌入式</div>将css样式编写在扩展名为 .css 的文件中，再导入样式，导入在head标签内部。
// 随便命名一个style.css 文件，将样式写在其中
div{ ?
color: blue;
}
// 然后在html文件中引入style.css文件
<link href="style.css" type="text/css" rel="stylesheet" />
<div>链接式</div>相当于原来的css文件中包含了被导入的css文件的样式，两者合并在一个文件中（不推荐使用）。
// 创建一个index.css 文件，在里面编写我们自身的样式
div{ ?
color: orange; ?
font-size: 20px; ?
width: 200px; ?
height: 40px;
}
// 使用@import方式导入上面的index.css 文件
<style>
@import url(index.css)
</style>
<div></div>前三者样式的显示优先级：
遵循就近原则：行内样式 > 嵌入式样式 > 外部样式。
前，在学习使用Vue2.0开发新的项目。然而目前用Vue实现的UI框架里面，尚未出现具有像bootstrap一样统治力的框架。一番纠结后，老夫...
那么问题来了，在Vue中如何引入jQuery和swiper呢？
经历半天搜索、比对、尝试之后，得出了下面的结论，单用 webpack 时设置同理。
引入jQuery
这个问度娘就有很多方案，我这里选取的是将jQuery暴露到全局的方式，这样就不用每个用到的地方都要import一次
安装 jQuerynpm i -S jQuery //等同于 npm install --save jQuery
设置 webpack.config.jsvar webpack=require('webpack')
const ProvidePlugin=new webpack.ProvidePlugin({//引入外部类库
$: 'jquery',
jQuery: 'jquery',
});
module.exports={
...
plugins: [
ProvidePlugin,
],
...
}
对于web前端学习不懂的，或者不知道怎么学习的可以来我的前端群477149581，源码已上传群文件，不管你是小白还是大牛，小编都欢迎，群不定期分享干货，欢迎初学和进阶中的小伙伴。
至此，可全局使用熟悉的$符号了。
更多办法
使用 exports-loader
设置 externals（详情参考推荐答案）
普通 import（也就是接下来要说的办法）
引入swiper插件
本来设置externals后再在index.html中引用的办法也是挺好的，但在我的项目中只有一个页面用到，而且externals方式不知如何设置css（还望高人指点），故选择普通import的方式。
此法无需在index.html引用其JS或CSS，但每个用到的页面都需要import一次，jQuery也可用此法引入。
简单粗暴import
在 script 中 import 其js文件
import Swiper from '../assets/lib/swiper-3.4.2.min.js'
在 style 中 @import 其css文件
@import '../assets/lib/swiper-3.4.2.min.css';
至此，可以像往常一样使用又爱又恨的swiper了。
最后
虽以上皆经过实战检验，但若有错误欢迎指正。
更多的炫酷企业级练习特效，学习方法和面试技巧，敬请关注本头条号！·
天有人反馈了一个在iframe内无法调用网站同一个站点的页面问题并报错，就在网站查了一些相关的资料，整理一下关于禁止网站所有页面或某一个页面被iframe内框架调用的方法。
网站iframe内框架调用页面报错如下
Refused to display http://xxxxxx.com in a frame because it set 'X-Frame-Options' to 'deny'.
通过查到的资料可得知，此错误与iframe框架被调用页面的 HTTP 标头中 X-Frame-Options 设置有关，所以整理了如下资料
X-Frame-Options是一个HTTP响应头，用来告诉浏览器此页面是否可以在其它网页中的frame或iframe标签中被渲染，网站可以利用此响应头来避免被其它网站所劫持。
X-Frame-Options有三个参数值，分别如下
DENY：表示不能被嵌入到任何iframe或frame中。
SAMEORIGIN：表示页面只能被本站页面嵌入到iframe或者frame中。
url，指定是一个域名，表示此网页只能被指定域名下的页面中的框架所调用
html代码
以下代码，添加到HTML页面中的head标签内即可
代码1：html页面禁止被框架调用
<meta http-equiv="X-Frame-Options" content="deny">
代码2：只允许页面被本站调用
<meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
代码3：只允许页面被指定URL嵌套调用
<meta http-equiv="X-Frame-Options" content="http://www.feiniaomy.com">
PHP代码
<?php
//示例1
header('X-Frame-Options: deny');
//示例2
header('X-Frame-Options: SAMEORIGIN');
//示例3
header('X-Frame-Options: http://www.feiniaomy.com');
?>
攻击者可以使用一个透明的、不可见的iframe标签，加载目标页面，然后通过调整iframe页面的位置，诱导用户进行点击操作页面的功能区，并劫持用户的数据，达到劫持页面的目的。
*请认真填写需求信息，我们会在24小时内与您取得联系。
