小谈 iframe 的使用方法
不清楚这个年代还有么有人接触iframe, 至少我在开发SPA过去的几年内没怎么接触过. 这次机缘巧合中, 接触了iframe (inline-frame).
iframe 有两种使用方式
iframe的src=参考: https://www.w3schools.com/tags/att_iframe_sandbox.asp
写法一般就是, 通过 src= 来定义embed的页面. 这个页面可以是同源(same domain) 或者是 不同源 (different domain)的页面. 现实生活中的iframe用法, 一般是插入广告代码, 或者 引用别的网站的资源, 比如页面或者视频等小偷程序. (如果你有别的用法, 请告诉我. 谢谢! )
第一个, 同源例子
<iframe src="demo_iframe_sandbox.htm" sandbox></iframe>
第二个例子
// https://www.tutorialrepublic.com/codelab.php?topic=html&file=specify-dimensions-for-an-iframe
// https://www.tutorialrepublic.com/html-tutorial/html-iframes.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of HTML Iframe</title>
</head>
<body>
<iframe src="/examples/html/demo-page.html" width="300" height="200">
alternative content for browsers which do not support iframe.
</iframe>
</body>
</html> 前两个都是Same Domain Origin, 不会出现CORS 问题.
首先说下, 这里的同源指的是, 必须是Same Domain, Same Protocol, Same Port Number. 举个例子, 必须是同样的域名, 同样的http (或者 https), 同样的端口(port, 443, 80, 4443, 8080)
那么, 现在我们举个例子, 是CORS的问题. CORS出现就是因为因为同源条件没满足(这不废话嘛).
解决方法
1) 如果能把不同源改成同源, 问题自然迎刃而解.
2) 如果改变不了, 就得用iframe里面引用的网页的服务端. 通过修改cors 的response header 的一些属性, 来告知浏览器去展示安全的网页内容.
- 修改
Get, 并且将MIME的 type, 修改成text/html. Browser会根据它的MIME 类别, 来展现, 如果是text/plain的话, 就会按照文本 (text) 展示. 如果是text/html就会展示为html. 如果是image/png就会按照图片的格式被展现. 我这里用了 https://github.com/sindresorhus/file-type 这个package 用来检测 fileType.
<iframe src={{iframeUrl}} width="100%" height="100%">
<h4>Alternative content for browsers which do not support iframe.</h4>
</iframe>
2. 如果想支持, 直接通过ajax方式来获取内容, 然后直接讲内容修改. 比如
<iframe src={{iframeUrl}} width="100%" height="100%">
{{myAjaxContent}}
</iframe>
那么, 这就需要修改Response Header了. 跟一般的cors 一样 . 可以参考: A practical guide to CORS – Thomas Wang – Medium https://medium.com/@xinganwang/a-practical-guide-to-cors-51e8fd329a1f
简单讲就是
- 简单暴力方法, 直接暴力干掉cors. 同意所以连接请求
[*], 同意所有credentials
const cors = {
origin: ['*'],
credentials: true
};
2. 更颗粒化, 只允许一些, 而且因为不是简单的Request (Simple Request), 需要处理preflight
Request Method: OPTIONS
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: GET还是推荐看下 Wang 写的Cors教程, 深入浅出, 容易理解.
3. 还有postMessage 等方法, 我没有实战经验就不乱写了. (可参考: https://medium.com/@crookse/cross-domain-communication-parent-window-and-child-iframe-aaf90fcb3e26)
2. iframe 的 srcdoc= , 可以参考: https://www.w3schools.com/jsref/prop_frame_srcdoc.asp
// iframeObject.srcdoc = HTML_code
<iframe srcdoc="<p>Hello world!</p>" src="demo_iframe_srcdoc.htm"></iframe>
如果 srcdoc 存在的话, 会作为首选, 而忽略掉 src= 的连接.
« 谢谢阅读, 欢迎转发.
Reference
- https://stackoverflow.com/questions/19739001/which-is-the-difference-between-srcdoc-and-src-datatext-html-in-an
- https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
- https://medium.com/@crookse/cross-domain-communication-parent-window-and-child-iframe-aaf90fcb3e26
文章被以下专栏收录
