场景描述：
当使用web组件加载带有iframe的页面时，由于H5的iframe标签的几个限制条件，可能会出现以下问题：
1.由于iframe也要遵守浏览器同源策略，也有对应的白名单限制，所以也会出现跨域或者无法加载的问题，大多出现在本地或沙箱中的H5资源内联iframe时，并且cookie有时候也设置不上
2.在应用侧调用runJavascript方法调用不到iframe里面，且主frame和iframe无法相互调用对方的属性
场景一：iframe加载问题
--在线的url里面嵌套的iframe基本上没有加载问题以及cookie设置问题
--本地的文件嵌套在线的iframe由于同源策略或者网页frame-ancestors属性的白名单限制会出现加载问题，即：
当控制台报错Refused to frame 'https://......com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors *........com"，可能是frame-ancestors 指令导致的，这个指令用于指定哪个域名的网页可以嵌入当前页面，如果当前页面的主frame不在允许的源列表中，浏览器将拒绝加载该页面。
在一个本地的H5嵌入这个链接进行测试，可复现这个问题。
Set Cookie in Iframe
解决方案就是通过拦截替换请求，将在源列表中允许的域名给到本地H5上即可规避这个问题，以下示例就是将主域名换做.huawei.com，这样即可成功加载。
import web_webview from '@ohos.web.webview';
import { url } from '@kit.ArkTS';
@Entry
@Component
struct SecondPage {
@State message: string = 'Hello World';
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
@State url: string | Resource = 'https://xxx.html';
responseData: WebResourceResponse = new WebResourceResponse()
dir = getContext().filesDir;
aboutToAppear(): void {
web_webview.WebviewController.setWebDebuggingAccess(true)
}
build() {
Column() {
Web({ src: this.url, controller: this.webviewController })
.domStorageAccess(true)
.fileAccess(true)
.onInterceptRequest((event) => {
if (!event || !event.request) {
return null
}
let request: WebResourceRequest = event.request
let requestUrl: string = request.getRequestUrl()
if (requestUrl.startsWith('https://developer1.huawei.com/')) {
let relativePath: string = url.URL.parseURL(requestUrl).pathname.replace(/^\//, '');
const resource = $rawfile(relativePath);
this.responseData = new WebResourceResponse();
this.responseData.setResponseData(resource);
let mimeType = "text/plain";
if (relativePath.endsWith(".html")) {
mimeType = "text/html";
} else if (relativePath.endsWith(".css")) {
mimeType = "text/css";
} else if (relativePath.endsWith(".js")) {
mimeType = "text/javascript";
}
if (mimeType.length > 0) {
this.responseData.setResponseEncoding('utf-8');
this.responseData.setResponseMimeType(mimeType);
this.responseData.setResponseCode(200);
this.responseData.setReasonMessage('OK');
this.responseData.setResponseIsReady(true)
}
return this.responseData;
}
return null
})
}
.padding({ top: 28 })
.height('100%')
.width('100%')
}
}--本地的文件嵌套本地的iframe一般不会有加载问题，但会出现cookie设置不上的问题
web组件的规格是目前只能给http或https协议的url设置cookie，所以放在本地rawfile和沙箱里的离线资源直接加载是无法设置cookie的，目前有两种方案：
- 通过拦截替换请求，给本地resource协议的iframe替换为http或https协议，然后直接使用configCookieSync设置即可；
- 可以使用js接口来给iframe设置cookie，也需使用拦截替换的方案：
具体的思路就是通过document.getElementById}获取元素并添加事件监听器，然后当点击事件点击后通过.contentWindow.document.cookie方法给iframe设置上cookie；注意：这个代码中是以两个本地H5文件来进行演示的，由于本地的H5都是以resource协议来加载的，根据浏览器内核的限制，是无法设置上cookie的，所以需要使用此方案。
Set Cookie in Iframe
场景二：主frame和iframe间通信
--通过contentWindow进行通信
具体的示例可以参考上文的js接口来给iframe设置cookie，注：此方法只能在同源的主frame和子frame中使用，这样主frame才能访问子frame的内部dom
--通过Window.postMessage()进行通信
它的原理就是一个窗口可以引用另一个窗口的一些属性，然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息 ，这个方法不受同源策略的限制，但是必须是http或https协议的域名下才行，所以还是得使用上面的拦截替换的方案
可以参考以下代码，这个代码是调用runJavaScript方法的时候作用不到iframe里面，使用postMessage进行消息通信。
import webview from '@ohos.web.webview';
import { url } from '@kit.ArkTS';
@Entry
@Component
struct Index {
controller: webview.WebviewController = new webview.WebviewController();
@State url: string | Resource = 'https://developer1.huawei.com/postMessage.html';
responseData: WebResourceResponse = new WebResourceResponse()
dir = getContext().filesDir;
aboutToAppear(): void {
webview.WebviewController.setWebDebuggingAccess(true)
}
build() {
Column() {
Web({
src: this.url,
controller: this.controller
})
.domStorageAccess(true)
.fileAccess(true)
.onPageEnd(()=>{
this.controller.runJavaScript('callIframeFunction()')
})
.onInterceptRequest((event) => {
if (!event || !event.request) {
return null
}
let request: WebResourceRequest = event.request
let requestUrl: string = request.getRequestUrl()
if (requestUrl.startsWith('https://developer1.huawei.com/')) {
let relativePath: string = url.URL.parseURL(requestUrl).pathname.replace(/^\//, '');
const resource = $rawfile(relativePath);
this.responseData = new WebResourceResponse();
this.responseData.setResponseData(resource);
let mimeType = "text/plain";
if (relativePath.endsWith(".html")) {
mimeType = "text/html";
} else if (relativePath.endsWith(".css")) {
mimeType = "text/css";
} else if (relativePath.endsWith(".js")) {
mimeType = "text/javascript";
}
if (mimeType.length > 0) {
this.responseData.setResponseEncoding('utf-8');
this.responseData.setResponseMimeType(mimeType);
this.responseData.setResponseCode(200);
this.responseData.setReasonMessage('OK');
this.responseData.setResponseIsReady(true)
}
return this.responseData;
}
return null
})
}
}
}以下H5中的主frame中的代码，在callIframeFunction方法里监听来自iframe的消息以及发送消息到iframe。
Parent Page
以下是iframe的代码，用于接受来自主frame的消息并回消息给到它。
Iframe Page
Iframe Page
这里是嵌入的 iframe 页面。
FAQ
Q：web的三个拦截回调对iframe的拦截情况是什么样的？
--onLoadIntercept和onInterceptRequest都可以拦截到主frame和iframe的url，onOverrideUrlLoading回调只能拦截到页面内的跳转，写在web组件src属性里的链接和loadUrl都不会触发此回调，并且只能拦截到resource协议，file协议或自定义协议的iframe，http/https协议的iframe拦截不到。且当onOverrideUrlLoading返回true后，主frame可以加载，http/https协议的iframe可以加载，所有的本地iframe都无法加载
Q：H5上面动态加载多个iframe，为什么历史栈变多了？
--iframe里加载的也是一个html页面，有完整的上下文，当有多个iframe需要在主页面加载完成后再加载时，就相当于跳转了几次页面，历史栈就会增加，这个是目前的规格。onInterceptRequest无法控制iframe里的src是否可以加载，可以通过onLoadIntercept和onOverrideUrlLoading回调拦截iframe里的src，根据业务逻辑设置是否允许加载来解决历史栈增加的问题。注：onOverrideUrlLoading方法无法拦截http/https协议的iframe，请按需选择使用哪个回调
Q：能否通过onPageBegin或者onPageEnd监听iframe的加载情况？
--不行，目前onPageBegin和onPageEnd回调只会在主frame触发。