[JavaScript知识库]iframe框架，，原生js路由

一、iframe框架

1. iframe 标签

该标签规定一个内联框架。被用来在当前 HTML 文档中嵌入另一个文档。

可以把需要的文本放置在 和 之间

2. 属性汇总

3.JS操作iframe

(1) 获得iframe的window对象

function getIframeWindow(element){
return element.contentWindow;
//return element.contentWindow || element.contentDocument.parentWindow;
}

(2) 获得iframe的document对象

var getIframeDocument = function(element) {
return element.contentDocument || element.contentWindow.document;
};

(3) iframe中获得父页面的window对象

(4) 获得iframe在父页面中的html标签

(5) iframe的onload事件

var i = document.createElement('iframe');
i.src = 'http://www.b.com/index.php';
i.onload = function() {
alert('loaded');
};
document.body.appendChild(i);

二、原生js路由

🎗 基于 hash（ location.hash+hashchange事件）
展示层面也就是切换 # 后面的内容，呈现给用户不同的页面

特性：

url 中 hash 值的变化并不会重新加载页面 hash
值的改变，可以在浏览器的访问历史中增加一个记录，也就是能通过浏览器的回退、前进按钮控制 hash 的切换

可以通过 hashchange 事件，监听到 hash 值的变化，从而响应不同路径的逻辑处理

🎗基于 history 新 API（ history.pushState()+popState 事件）

window.history.pushState(null, null, "http://www.google.com");

🎗相同之处:
都会操作浏览器的历史记录，而不会引起页面的刷新。
不同之处在于:
pushState 会增加一条新的历史记录，而 replaceState 则会替换当前的历史记录

🎗实现前端路由

(1) hash 实现

当 一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件

hash 是 URL 中 hash (#) 及后面的那部分，常用作锚点在页面内进行导航，改变 URL 中的 hash 部分不会引起页面刷新

通过 hashchange 事件监听 URL 的变化，改变 URL 的方式只有这几种：通过浏览器前进后退改变 URL、通过 <a>
标签改变 URL、通过window.location改变URL，这几种情况改变 URL 都会触发 hashchange 事件

(2) history 实现

history.pushState() 和history.replaceState方法，它们分别可以添加和修改历史记录条目

history 有 pushState 和 replaceState 两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新

• replaceState() 方法

history.replaceState() 的使用与 history.pushState() 非常相似，区别在于

replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。

replaceState() 的使用场景在于为了响应用户操作，你想要更新状态对象state或者当前历史记录的URL。

• popstate 事件

popstate事件就会在对应window对象上触发.

调用history.pushState()或者history.replaceState()不会触发popstate事件.
popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者
在JavaScript中调用history.back()、history.forward()、history.go()方法).