HTML <iframe>和<frame>标签

<iframe>元素会创建包含另外一个文档的内联框架（即行内框架）；

一、align 属性（不赞成）

       align属性规定iframe相对于周围元素的水平和垂直对齐方式，因为iframe元素是行内元素，即不会在页面上插入新行，这意味着文本和其他元素可以围绕在其周围，所以align属性可以规定iframe相对于周围元素的对齐方式；

二、frameborder属性

       frameborder属性规定是否显示iframe周围的边框，但出于实用性方面的原因，最好不用设置该属性，而使用CSS来设置边框,是否显示边框：1(yes),0(no)；

<html>
<body>

<iframe src ="/index.html" width="400" height="300" frameborder="0">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>
三、height 属性

       规定 iframe 的高度；

<html>

<body>
<iframe src ="/index.html" width="400px" height="500px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>

</html>
四、marginheight 属性

       规定 iframe 的顶部和底部的空白边距，以像素计；

<html>
<body>
<iframe src ="/example/html/demo_iframe.html" marginheight="50px"
 width="400px" height="300px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
五、marginwidth 属性

       规定 iframe 的左边和右边的空白边距，以像素计；

<html>
<body>
<iframe src ="/example/html/demo_iframe.html" marginwidth="50px"
 width="400px" height="300px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
六、name 属性

       规定 iframe 的名称，iframe 元素的 name 属性用于在 JavaScript 中引用元素，或者作为链接的目标；

<html>
<body>
<iframe src="/example/html/demo_iframe.html" name="iframe_a">
  <p>Your browser does not support iframes.</p>
</iframe>
<a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a>
</body>
</html>
七、sandbox属性

       如果被规定为空字符串（sandbox=""），sandbox 属性将会启用一系列对行内框架中内容的额外限制，sandbox 属性的值既可以是一个空字符串（应用所有的限制），也可以是空格分隔的预定义值列表（将移除特定的限制）；

  • ""：应用以下所有的限制；
  • allow-same-origin：允许 iframe 内容被视为与包含文档有相同的来源；
  • allow-top-navigation：允许 iframe 内容从包含文档导航（加载）内容；
  • allow-forms：允许表单提交；
  • allow-scripts：允许脚本执行；
<!DOCTYPE html>
<html>
<body>

<iframe src="/demo/demo_iframe_sandbox.html" sandbox="">
  <p>Your browser does not support iframes.</p>
</iframe>

<p>"获得日期和时间" 按钮会在行内框架中运行一段脚本。</p>
<p>由于 sandbox 属性被设置为空字符串 ("")，行内框架的内容不允许运行脚本。</p>
<p>如果向 sandbox 属性添加 "allow-scripts"，则允许运行 JavaScript。</p>
<p><b>注释：</b>IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。</p>

</body>
</html>
八、scrolling 属性

       规定是否在 iframe 中显示滚动条，默认地，如果内容超出了 iframe，滚动条就会出现在 iframe 中；

  • auto：在需要的情况下出现滚动条（默认值）；
  • yes：始终显示滚动条（即使不需要）；
  • no：从不显示滚动条（即使需要）；
<html>
<body>
<h3>iframe 中始终显示滚动条：</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<h3>iframe 中从不显示滚动条：</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="no">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
九、seamless 属性

       属于逻辑属性，当设置该属性后，它规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）；

<!DOCTYPE html>
<html>
<body>
<p>这是一个段落。</p>
<iframe src="/demo/demo_iframe.html" seamless></iframe>
<p><b>注释：</b>Opera、Chrome 以及 Safari 支持 seamless 属性。</p>
</body>
</html>
十、src 属性

       规定在 iframe 中显示的文档的 URL；

  • 绝对 URL：指向其他站点（比如 src="www.example.com/index.html"）；
  • 相对 URL：指向站点内的文件（比如 src="index.html"）；
<html>
<body>
<iframe src ="/index.html">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
十一、srcdoc 属性

       规定页面的 HTML 内容显示在行内框架中，该属性与 sandbox 和 seamless 属性一同使用，如果浏览器不支持 srcdoc 属性，则相应地会显示在 src 属性（若已设置）中规定的文件；

<!DOCTYPE html>
<html>
<body>
<iframe srcdoc="<p>Hello world!</p>" src="/demo/demo_iframe_srcdoc.html">
  <p>Your browser does not support iframes.</p>
</iframe>
<p><b>注释：</b>所有主流浏览器都支持 srcdoc 属性，除了 Internet Explorer。</p>
</body>
</html>
十二、width 属性

       规定 iframe 的宽度；

<html>
<body>
 <iframe src ="/index.html" width="400px" height="300px">
  <p>Your browser does not support iframes.</p>
 </iframe>
</body>
</html>
十三、iframe的基本特性

       通常使用Iframe最基本的特性，就是能自由操作iframe和父框架的内容（DOM），但前提条件是同域，如果跨域顶多只能实现页面跳转window.location.href；

A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>
B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

使用A时，因为同域，父页面可以对子页面进行改写,反之亦然；
使用B时，不同域，父页面没有权限改动子页面,但可以实现页面的跳转；

十四、获取iframe里的内容

       iframe.contentWindow：获取iframe的window对象；
       iframe.contentDocument：获取iframe的document对象；
这两个API只是DOM节点提供的方式(即getELement系列对象)

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc);  //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html
console.log("head",idoc.head);  //获取head
console.log("body",idoc.body);  //获取body

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
    console.log(window.frames['ifr1'].window);
    console.dir(document.getElementById("ifr1").contentWindow);
</script>
十五、在iframe中获取父级内容

       在同域下，子iframe同样也能操作父页面内容，在iframe中，可以通过在window上挂载的几个API进行获取；
       window.parent：获取上一级的window对象，如果还是iframe则是该iframe的window对象；
       window.top：获取最顶级容器的window对象，即打开页面的文档；
       window.self：返回自身window的引用，可以理解为window===window.self；

十六、iframe的轮询

       之前的网页可以使用iframe实现异步发送请求；
       ajax的长轮询是在ajax的readyState=4时再次执行原函数，这里使用iframe也是一样，异步创建iframe，然后reload，和后台协商好，看后台返回的信息放在哪，然后获取里面的信息即可，这里是直接放在body里；

var iframeCon = docuemnt.querySelector('#container'),text; //传递的信息
var iframe = document.createElement('iframe'),
    iframe.id = "frame",
    iframe.style = "display:none;",
    iframe.name="polling",
    iframe.src="target.html";
iframeCon.appendChild(iframe);
iframe.onload= function(){
      var iloc = iframe.contentWindow.location,
          idoc  = iframe.contentDocument;
      setTimeout(function(){
          text = idoc.getElementsByTagName('body')[0].textContent;
          console.log(text);
          iloc.reload(); //刷新页面,再次获取信息，并且会触发onload函数
      },2000);
    }
十七、自适应iframe之蜜汁广告

       通常使用iframe在页面引入广告，因为广告一般是与页面内容不相关的，如果使用div在页面中嵌套，会造成网页内容的紊乱，而且这样势必需要引入额外的css和js，极大的降低了网页的安全性，因此需要使用iframe来插入广告，我们可以将iframe理解为一个沙盒，里面的内容能够被top window完全控制，而且主页的css样式是不会入侵iframe里面的样式，这些都给iframe的广告命运埋下伏笔，默认情况下，iframe是不适合做展示信息的，需要对其进行decorate；

自适应iframe

       第一步：默认情况下，iframe会自带滚动条，不会全屏，如果想自适应iframe，需要去掉滚动条；

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

       第二步：设置iframe的高为body的高；

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

此外，还可以添加其他的装饰属性：
1）allowtransparency：true or false，是否允许iframe设置为透明，默认为false；
2）allowfullscreen：true or false，是否允许iframe全屏，默认为false；

// 样式可以直接写在内联样式里面，也可以在css里面定义，不过对于广告iframe来说，样式写在属性中，是best pratice；
<iframe id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
十八、iframe安全性探索

       iframe出现安全性有两个方面，一是你的网页被别人iframe；二是你iframe别人的网页；当你的网页被别人iframe时，可能容易被钓鱼网站利用，为了防止页面被一些不法分子利用，我们需要做好安全性措施；

防嵌套网页

       比如clickhacking就是使用iframe来拦截click事件，因为iframe享受着click的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面，所以钓鱼网站就是使用这个技术，通过诱导用户进行点击，比如设计一个“妹妹寂寞了”等之类的网页，诱导用户点击，但实际结果，看到的不是“妹妹”，而是被恶意微博吸粉，所以为了防止网站被钓鱼，可以使用window.top来防止网页被iframe；

//iframe2.html
// 限定你的网页不能嵌套在任意网页内
if(window != window.top){
    window.top.location.href = correctURL;
}

这段代码的主要用途是限定你的网页不能嵌套在任意网页内。如果你想引用同域的框架的话，可以判断域名。

// 如果想引用同域的框架的话，可以判断域名，如果不同域的话，上述内容会报错
if (top.location.host != window.location.host) {
　　top.location.href = window.location.href;
}

所以，这里可以使用try...catch...进行错误捕获。如果发生错误，则说明不同域，表示你的页面被盗用了。可能有些浏览器这样写是不会报错，所以需要降级处理。
这时候再进行跳转即可.

// 使用try...catch...进行错误捕获，如果发生错误，则说明不同域，表示页面被盗用了
try{
　　top.location.hostname; //检测是否出错
　　//如果没有出错，则降级处理
　　if (top.location.hostname != window.location.hostname) { 
　　　　top.location.href =window.location.href;
　　}
} catch(e){
　　top.location.href = window.location.href;
}
X-Frame-Options

       X-Frame-Options是一个相应头，主要是描述服务器的网页资源的iframe权限，其实就是将前端js对iframe的把控权交给服务器来进行处理：

  • X-Frame-Options: DENY：拒绝任何iframe的嵌套请求；
  • X-Frame-Options: SAMEORIGIN：只允许同源请求，例如网页为 foo.com/123.php，則 foo.com 底下的所有网页可以嵌入此网页，但是 foo.com 以外的网页不能嵌入；
  • X-Frame-Options: ALLOW-FROM http://s3131212.com：只允许指定网页的iframe请求，不过兼容性较差，Chrome不支持；
//js
if(window != window.top){
    window.top.location.href = window.location.href;
} //等价于
X-Frame-Options: DENY //js
if (top.location.hostname != window.location.hostname) { 
　　　　top.location.href =window.location.href;
} //等价于
X-Frame-Options: SAMEORIGIN</pre>

       X-Frame-Options属性是对页面的iframe进行的一个主要限制，不过涉及iframe的header可不止这一个，另外还有一个Content Security Policy，他同样也可以对iframe进行限制，而且他应该是未来网页安全防护的主流；

CSP之页面防护

       和X-Frames-Options一样，都需要在服务端设置好相关的Header，CSP能够极大的防止页面被XSS攻击，而且可以制定js，css，img等相关资源的origin，防止被恶意注入，不过兼容性不好；
       使用主要是在后端服务器上配置，在前端可以观察Response Header里是否有这样一个Header：

Content-Security-Policy: default-src 'self'

       通常我们可以在CSP后配置各种指定资源路径，有

  • default-src,
  • script-src,
  • style-src,
  • img-src,
  • connect-src,
  • font-src,
  • object-src,
  • media-src,
  • sandbox,
  • child-src,
  • ...
           如果未指定的话，会默认使用default-src规定的加载策略，默认配置就是同域： default-src "self"；这里还和iframe有一点瓜葛的就是child-src 和 sandbox，child-src就是用来指定iframe的有效加载路径，其实和X-Frame-Options中配置allow-origin是一个道理，不过allow-origin没有得到厂商的支持，而sandbox其实就和iframe的sandbox属性是一样的，他可以规定来源能够带有什么权限；
Content-Security-Policy: child-src 'self' http://example.com; sandbox allow-forms allow-same-origin</pre>

       此时iframe的src就只能加载同域和example.com页面，最后再补充一点：使用CSP能够很好的防止XSS攻击，原理就是CSP会默认escape掉内联样式和脚本以及eval执行，可以使用srcipt-src进行降低限制；

Content-Security-Policy: script-src 'unsafe-inline'

       当然我们面临的安全总量还有一个，就是当iframe别人的页面时，我们需要对其进行安全设限，虽然跨域时iframe的安全性会大很多，但是互联网没有安全的地方，H5提供的新属性sandbox可以很好的解决这个问题；

sandbox

       sandbox就是用来给指定的iframe设置一个沙盒模型来限制iframe的更多权限，sandbox是H5的一个新属性；

// 这样就可以对iframe页面进行一系列的限制
<iframe sandbox src="..."></iframe>

可以进行如下操作：

  • script脚本不能执行；
  • 不能发送ajax请求；
  • 不能使用本地存储，即localStorage，cookie等；
  • 不能创建新的弹窗和window；
  • 不能发送表单；
  • 不能加载额外插件比如flash等；

常用的配置项有：

配置 效果
allow-forms 允许进行提交表单
allow-scripts 运行执行脚本
allow-same-origin 允许同域请求,比如ajax,storage
allow-top-navigation 允许iframe能够主导window.top进行页面跳转
allow-popups 允许iframe中弹出新窗口,比如,window.open,target="_blank"
allow-pointer-lock 在iframe中可以锁定鼠标，主要和鼠标锁定有关 
// 这样可以保证js脚本的执行，但是禁止iframe里的javascript执行top.location = self.location
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="..."></iframe>
resolve iframe跨域

       iframe就是一个隔离沙盒，相当于我们在一个页面内可以操控很多个标签页一样，如果踩坑的童鞋应该知道，iframe也可以解决跨域；
       iframe可以解决二级域名跨域的情况，即主域相同而子域不同的情况，在两个不同子域下（某一方使用iframe嵌套在另一方）：

// 两个文件中分别加上document.domain = ‘foo.com’,指定相同的主域
// 然后,两个文档就可以进行交互了
http: //www.foo.com/a.html
http: //script.foo.com/b.html

//b.html是以iframe的形式嵌套在a.html中
//www.foo.com上的a.html
document.domain = 'foo.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.foo.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
//script.foo.com上的b.html
document.domain = 'foo.com';

       默认情况下document.domain 是指window.location.hostname， 你可以手动更改，但是最多只能设置为主域名，通常，主域名就是指不带www的hostname, 比如: foo.com , baidu.com ， 如果带上www或者其他的前缀，就是二级域名或者多级域名，通过上述设置，相同的domain之后，就可以进行同域的相关操作；

H5的CDM跨域与iframe

       如果设置的iframe域名和top window域名完全不同，则可以使用CDM(cross document messaging)进行跨域消息的传递；
发送消息：使用postmessage方法；
接收消息：监听message事件；

postmessage

       该方法挂载到window对象上，即使用window.postmessage()调用，该方法接受两个参数：postMessage(message, targetOrigin)

  • message：就是传递给iframe的内容，通常是string，如果想传object对象也可以，但如果有条件，可以使用JSON.stringify进行转化，这样保证不会出bug；
  • targetOrigin：接受你传递消息的域名，可以设置绝对路径，也可以设置"*"或者"/"， *表示任意域名都行，"/"表示只能传递给同域域名；
<iframe src="http://tuhao.com" name="sendMessage"></iframe>
//当前脚本
let ifr = window.frames['sendMessage'];
   //使用iframe的window向iframe发送message。
ifr.postmessage('give u a message', "http://tuhao.com");
//tuhao.com的脚本
window.addEventListener('message', receiver, false);
function receiver(e) {
    if (e.origin == 'http://tuhao.com') {
        if (e.data == 'give u a message') {
            e.source.postMessage('received', e.origin);  //向原网页返回信息
        } else {
            alert(e.data);
        }
    }
}

       当targetOrigin接收到message消息之后,，会触发message事件，message提供的event对象上有3个重要的属性，data,origin,source：

data：postMessage传递进来的值；
origin：发送消息的文档所在的域；
source：发送消息文档的window对象的代理，如果是来自同一个域，则该对象就是window，可以使用其所有方法，如果是不同的域，则window只能调用postMessage()方法返回信息
十九、<frameset>和<iframe>的区别
  • iframe 和 frameset 都用于html页面的框架布局；
  • <iframe>：iframe 是个内联框架，是在页面里生成个内部框架；
    <frameset >：frameset 定义一个框架集，包含多个子框架，每个框架都有独立的文档；
<html>
<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>
</html>
  • frame不能脱离frameSet单独使用，iframe可以；
  • frame不能放在body中：
// 如下可以正常显示
<!--<body>--> 
<frameset rows="50%,*"> 
   <frame   name="frame1"   src="test1.htm"/>  
   <frame   name="frame2"   src="test2.htm"/>  
</frameset> 
<!--<body>--> 

// 如下不能正常显示： 
<body> 
<frameset rows="50%,*"> 
   <frame   name="frame1"   src="test1.htm"/>  
   <frame   name="frame2"   src="test2.htm"/>  
</frameset> 
<body>
  • 嵌套在frameSet中的iframe必须放在body中：
// 如下可以正常显示： 
  <body> 
    <frameset>  
      <iframe   name="frame1"   src="test1.htm"/>  
      <iframe   name="frame2"   src="test2.htm"/>  
    </frameset>  
  </body> 
// 如下不能正常显示： 
  <!--<body>--> 
    <frameset>  
      <iframe   name="frame1"   src="test1.htm"/>  
      <iframe   name="frame2"   src="test2.htm"/>  
    </frameset>  
  <!--</body>-->
  • 不嵌套在frameSet中的iframe可以随意使用；
// 如下均可以正常显示： 
<body> 
   <iframe   name="frame1"   src="test1.htm"/>  
   <iframe   name="frame2"   src="test2.htm"/>  
</body> 

<!--<body>--> 
   <iframe   name="frame1"   src="test1.htm"/>  
   <iframe   name="frame2"   src="test2.htm"/>  
<!--</body>-->
  • frame的高度只能通过frameSet控制，iframe可以自己控制，不能通过frameSet控制，如：
<!--<body>--> 
<frameset rows="50%,*"> 
   <frame name="frame1"   src="test1.htm"/>  
   <frame name="frame2"   src="test2.htm"/>  
</frameset> 
<!--</body>--> 

<body> 
<frameset> 
   <iframe height="30%"  name="frame1"   src="test1.htm"/>  
   <iframe height="100"  name="frame2"   src="test2.htm"/>  
</frameset> 
</body>

  • 如果在同一个页面使用了两个以上的iframe：
           IE中可以正常显示，在firefox中只能显示出第一个，使用两个以上的frame在IE和firefox中均可正常显示；

  • frame与iframe两者可以实现的功能基本相同，不过Iframe比frame具有更多的灵活性， frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架 :
           iframe标记又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示，它和frame标记的最大区别是在网页中嵌入的<iframe></iframe>所包含的内容与整个页面是一个整体，而<frame></frame>所包含的内容是一个独立的个体，是可以独立显示的，另外，应用iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内容的代码；

  • iframe 可以放到表格里面，frame 则不行；

<table> 
 <tr> 
   <td><iframe id="" src=""></iframe></td><td></td> 
 </tr> 
</table>

  • frame必须在frameset里，而frameset不能与body元素共存，也就说有frameset元素的文档只能是一个框架集，不能有别的东西；

  • iframe放在网页的什么地方都行，但是frame只能放到上下左右四个方向；

  • iframe是活动帧，而frame是非活动帧：

// iframe使用方法如下   
  <iframe scr="sourcefile" frameborder=0 width="width" height="height"></iframe>

  • iframe用起来更灵活，不需要frame那么多讲究，而且放的位置也可以自己设， iframe是内嵌的，不过也有不好的地方，就是位置在不同的浏览器和分辨率下有可能不同，有时会把本来好好的页面搞得变形；

  • iframe可以加在网页中任何一个地方，而frame通常做框架页，iframe是一个网页中的子框架，两网页间是父子关系，frame是框架，由多个并列的网页构成；

  • iframe是浮动的，就像是浮动面板，而frame是固定的，只能四个方向上的；

  • <iframe>是被嵌入在网页的元素，而<frame>用于组成一个页面的多个框架，iframe更利于版面的设计，frame一条直一条竖的不美观，frame的那一条线也可以去掉的呦！只不过，iframe更方便对其进行数据的交换吧！
    iframe可以放置到你想放的任意位置，控制起来比frame方便；

  • iframe是内部帧，可以嵌在一个页面里面，设置内部帧的属性可以使得整体看上去像是一个完整的页面，而不是由多个页面组成，frame有frame的好处，比如更多网站，上面放广告条，左边放菜单，右边放内容，这样上边和左边的内容都可不动，只刷新右边页面的内容，选择iframe还是frame完全看自己的需求；

  • 用iframe比用frame少一个文件（frameSet），但支持frame的浏览器比较多；

  • iframe可以放在表格里,然后ifame设置成width=100%，height=100%，这样就可以只需修改表格的宽度和高度，有利于排版 ；

  • 其实frame是一个控件，使用方法和Panle相同；

  • frame是把网页分成多个页面的页面。它要有一个框架集页面frameset，iframe是一个浮动的框架，就是在你的页面里再加上一个页面；

  • <frame>用来把页面横着或竖着切开，<iframe>用来在页面中插入一个矩形的小窗口；

  • frame一般用来设置页面布局，将整个页面分成规则的几块，每一块里面包含一个新页面，iframe用来在页面的任何地方插入一个新的页面，因此，frame用来控制页面格式，比如一本书，左边是章节目录，右边是正文，正文很长，看的时候要拖动，但又不想目录也被拖动得看不到了，因此最好将页面用frame分成规则的2页，一左一右；而iframe则更灵活，不要求将整个页面划分，可以在页面任何地方用iframe嵌入新的页面；

  • <frame>用于全页面；
    <iframe>只用于局部；

参考链接：
Web前端之iframe详解
frame和iframe的区别

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,104评论 1赞 45
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,362评论 0赞 0
  • 前端面试总结
    前端开发面试知识点大纲： HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：...
    秀才JaneBook阅读 2,251评论 0赞 25
  • 面试问题答案综合版(web)
    $HTML， HTTP，web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
    Hebborn_hb阅读 4,519评论 0赞 20
  • 这一天我的理解
    领导力是一个特别有意思的东西。 在过去一年中，除了常说的leader具备的那几个要素，在我看来，一个leader还...
    闪电丸阅读 195评论 0赞 0