HarmonyOS 鸿蒙Next arkweb webview加载本地html文件，内部嵌套不同域的iframe，如何操作iframe里的dom及调用里面的方法

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next arkweb webview加载本地html文件，内部嵌套不同域的iframe，如何操作iframe里的dom及调用里面的方法

webview加载本地html文件（file://xx/xx/xxx/index,html），html代码中嵌套不同域的iframe，如何在index.html 操作iframe里的dom及调用里面的方法。 现在通过index.html操作iframe里的dom及调用里面的方法报错如下: DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame. 安卓和IOS上是可以通过index.html操作iframe里的dom及调用里面的方法的，请问鸿蒙上如何设置。 arkweb webview 加载本地文件

Harmonyos Next教程
2 回复

如果是vscode可以使用下载一个live server插件运行一下，一般使用前端编译器运行，其次如果地址栏是file/// 需要更改为localhost 出于安全因素的考虑，在ArkWeb内核中，不允许file协议或者resource协议访问URL上下文中来自跨域的请求，如果要成功访问这些跨域资源，需要使用http或者https等协议进行加载（需要自己构造仅供自己个人或者阻止使用的域名），并且使用Web组件的onInterceptRequest进行本地资源拦截替换。

可以参考以下代码

// main/ets/pages/index.ets



import web_webview from '@ohos.web.webview'

@Entry

@Component

struct Index {

@State message: string = 'Hello World';

webviewController: web_webview.WebviewController = new web_webview.WebviewController();

// 构造域名和本地文件的映射表

schemeMap = new Map([

["https://www.example.com/index.html", "index.html"],

["https://www.example.com/js/script.js", "js/script.js"],

])

// 构造本地文件和构造返回的格式mimeType

mimeTypeMap = new Map([

["index.html", 'text/html'],

["js/script.js", "text/javascript"]

])

build() {

Row() {

Column() {

// 针对本地index.html,使用http或者https协议代替file协议或者resource协议，并且构造一个属于自己的域名，

// 本例中构造www.example.com为例。

Web({ src: "https://www.example.com/index.html", controller: this.webviewController })

.javaScriptAccess(true)

.fileAccess(true)

.domStorageAccess(true)

.geolocationAccess(true)

.width("100%")

.height("100%")

.onInterceptRequest((event) => {

if (!event) {

return;

}

// 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域

if (this.schemeMap.has(event.request.getRequestUrl())) {

let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!;

let mimeType = this.mimeTypeMap.get(rawfileName);

if (typeof mimeType === 'string') {

let response = new WebResourceResponse();

// 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置

response.setResponseData($rawfile(rawfileName));

response.setResponseEncoding('utf-8');

response.setResponseMimeType(mimeType);

response.setResponseCode(200);

response.setReasonMessage('OK');

response.setResponseIsReady(true);

return response;

}

}

return null;

})

}

.width('100%')

}

.height('100%')

}

}


// main/resources/rawfile/index.html


<html>

<head>

<meta name="viewport" content="width=device-width,initial-scale=1">

</head>

<body>

<script crossorigin src="./js/script.js"></script>

</body>

</html>

在HarmonyOS鸿蒙Next的arkweb中，加载本地HTML文件并操作内部嵌套不同域的iframe的DOM及调用方法，由于同源策略（Same-Origin Policy）的限制，直接操作跨域的iframe内容会遇到安全限制。以下是基本的处理思路：

  1. 使用postMessage进行跨域通信：

    • 在父页面中，通过iframe的contentWindow属性使用postMessage方法发送消息到iframe。
    • 在iframe的脚本中，监听message事件来接收父页面的消息，并根据消息内容执行相应的DOM操作或方法调用。

  2. 配置CORS（跨域资源共享）：

    • 如果需要更复杂的交互，且服务器支持，可以考虑配置CORS策略来允许特定的跨域请求。但请注意，这主要用于HTTP请求，而非直接操作DOM。

  3. 使用代理页面：

    • 在某些情况下，可以通过一个与iframe同源的代理页面来中转消息，从而间接实现对iframe内容的操作。这种方法较为复杂，且可能引入新的安全问题。

由于跨域操作存在安全风险，务必确保所有操作均符合安全规范。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部