driver.get调用iframe中的页面_小谈 iframe 的使用方法

最新推荐文章于 2021-01-20 19:34:32 发布

weixin_39869959

最新推荐文章于 2021-01-20 19:34:32 发布

阅读量142

点赞数

不清楚这个年代还有么有人接触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