遍地芝麻之html芝麻

前端实现下载

点击下载
实测，download属性无效，不知为啥，该标签可以实现静态文件下载功能，也可以在href中写后端请求地址动态获取文件

另一种可以使用window.open('./xxx.xxx)来下载

使用iframe来控制显示网页任意区域

iframe可以用来作为网页的拿来主义使用，不过安全性不高，但是有时候可以增加代码的复用率，提高开发效率。

iframe本身控制属性不多，控制显示区域需要结合div来做：

 <div style="width:800px;height:600px;overflow:hidden;border:0px"> 
   <iFrame src="http://www.baidu.com" width="800" height="600" scrolling="no" style="margin:-153px 0px 0px -10px;">iFrame>
 div> 

内层的iframe表示嵌入目标网站，主要设置宽高即可，然后是控制显示偏移位置（可以视原位置为可视窗口）。
外层用来去除多余区域，相当于遮罩层。

使用iframe并获取其中的内容

同域下

父页面拿子页面数据：

父页面
<iframe name="z" id="z" src="...">iframe>
<button onclick="getMsg()">拿子页面数据button>
<label id="f">label>

子页面
<input id="msg">input>

// 父页面
function getMsg(){
     
	document.getElementById("f").innerText=window.frames["z"].document.getElementById("msg").value;
}

父页面点击button后，父页面的label即被赋值。

子页面拿父页面数据：

父页面
<iframe name="z" id="z" src="...">iframe>
<input id="msg">input>
子页面
<button onclick="getMsg()">拿父页面数据button>
<label id="z">label>

// 子页面
function getMsg(){
     
	document.getElementById("z").innerText=window.parent.document.getElementById("msg").value;
}

子页面点击button后，子页面的label即被赋值。

参考

跨域下

使用两个方法来发送与接受：postMessage和addEventListener
父页面向子页面传递数据：

// 父页面
document.getElementById('iframe').contentWindow.postMessage(data,'*')

// 子页面
addEventListener('message', e => {
     
    // e.data为父页面发送的数据
    console.log(e.data)
})

子页面向父页面传递数据：

// 子页面
// data为子页面发送的数据（可以是一个js对象，会被自动序列化处理）
window.parent.postMessage(data, '*')

// 父页面
addEventListener('message', e => {
     
    // e.data为子页面发送的数据
    console.log(e.data)
})

注意：
在上边的代码中postMessage的第二个参数被设置为*，意为任意源，尤其是密码等关键数据，一定要注意，这里可以指定接收源，示例代码如下

// 发送方
 window.parent.postMessage('exit','http://example.org');

// 接受方
 addEventListener('message', e => {
     
    if(e.origin === 'http://example.org') {
     
        // 仅在数据发送来源自受信任的地址才执行对应操作
    }
})

参考