HarmonyOS 鸿蒙Next 用web组件加载本地HTML字符串并在特定位置插入图片点击触发原生方法

<!DOCTYPE html>

<html id='html' style='font-size: 50px;'>

<head>

<title>自然资源部:鼓励各地利用专项债券资金收回收购土地</title>

<meta charset='utf-8' />

<meta name=\ "viewport\" content=\ "initial-scale=1,width=device-width, maximum-scale=1, user-scalable=no\" id=\ "vp\">

<link rel='stylesheet' type='text/css' href='https://assets.qidian.sxtvs.com/static/iosApp/css/newsdetailV9.min.css'>

<script>function init() { (function(b, f) {

var a = b.documentElement,

c = 'orientationchange' in window ? 'orientationchange': 'resize',

e = function() {

var d = a.clientWidth;

d && (a.style.fontSize = d / 7.5 + 'px', console.log(a.style.fontSize))

};

b.addEventListener && (console.log(c), f.addEventListener(c, e, !1), e())

})(document, window)

}

init();</script>

</head>

<body>

<div class='content-container'>

<p class='title' id='title' style='margin-top: .50rem;font-size: .44rem;'>自然资源部:鼓励各地利用专项债券资金收回收购土地</p>

<div class='subtitle-wrap'>

<div class='info'>

<span class='from'>北京日报客户端</span>

<span class='time'>11-12 11:06</span>

</div>

<div class='subtitle-audio' id='subtitle-audio'>

<img src='https://assets.qidian.sxtvs.com/static/iosApp/img/audio.jpg' />

</div>

<script>(function() {

let subtitleAudioBtn = document.getElementById('subtitle-audio');

subtitleAudioBtn.addEventListener(\"click\",function(e){typeof bridge == \"object\" && bridge.callHandler('listonNewsClick');});})();"</script>

</div>

<!--IMG#1-->\n

<p class=\ "text text-indent-2em\">自然资源部近日发布《关于运用地方政府专项债券资金收回收购存量闲置土地的通知》明确，优先收回收购企业无力或无意愿继续开发、已供应未动工的住宅用地和商服用地。收回收购的土地原则上当年不再供应用于房地产开发。</p>\n

<p class=\ "text text-indent-2em\">今年6月，自然资源部会同国家发展改革委出台了妥善处置闲置存量土地若干政策措施，推出了帮助企业盘活存量土地资产、鼓励并购转让、支持地方政府收地等三方面18条政策措施。各地普遍欢迎，但同时也反映收回收购土地缺乏资金。</p>\n

<p class=\ "text text-indent-2em\">自然资源部自然资源开发利用司相关负责人介绍，此次印发的《通知》鼓励各地利用专项债券资金收回收购土地，盘活存量，一方面减少市场存量房地产用地规模，更好发挥土地储备“蓄水池”和投放调解的功能，另一方面增加资金流动性，有利于房企集中资金用于保交房。此外，收储后形成的“净地”“优地”，既有利于补齐公共服务设施短板改善环境，也可以腾出空间支持实体经济发展。</p>\n

<p class=\ "text text-indent-2em\">《通知》明确，使用专项债券资金用于收回收购土地，应由纳入名录管理的土地储备机构具体实施。优先收回收购企业无力或无意愿继续开发、已供应未动工的住宅用地和商服用地。其他用途的土地，进入司法或破产拍卖、变卖程序的土地，因低效用地再开发或基础设施建设等需要收回的土地，以及已动工地块中规划可分割暂未建设的部分，也可以纳入收回收购范围。</p>\n

<p class=\ "text text-indent-2em\">市、县自然资源主管部门要依托土地市场动态监测监管系统中的处置存量闲置土地清单摸清底数，根据需要向社会发布收回收购土地征集公告，综合考虑企业意愿、市场需求、地块条件等因素，确定拟收回收购意向地块和时序安排，分批纳入土地储备计划，优先申报使用专项债券。《通知》明确了原则性的价格标准和程序，各地应在此框架之下进一步细化评估和决策细则，确保收地价格公允合理，程序规范透明。</p>\n

<p class=\ "text text-indent-2em\">《通知》对收回收购后的再供应提出要求。根据《通知》，收回收购的土地原则上当年不再供应用于房地产开发。确有需求的，应当严控规模，优化条件实施供应，在落实“五类调控”的同时，供应面积不得超过当年收回收购房地产用地总面积的50%。收回收购土地用于民生领域和实体经济项目的，不受上述限制。</p>\n

<!--IMG#2--></div>

<p class='editor'>编辑:奥妮莎</p>

</body>

<script type='text/javascript' src='https://assets.qidian.sxtvs.com/static/iosApp/js/jquery.min.js'>

</script>

<script>$(function() {

var registerFlag = false;

var palyed = \"https://assets.qidian.sxtvs.com/static/share_article/images/iv_pause.png\";var paused=\"https://assets.qidian.sxtvs.com/static/share_article/images/iv_play.png\";$(\".audio-play\").click(function(){let payload={title:$(this).parent(\".icon\").parent(\".audio-container\").attr(\"audio-title\"),duration:$(this).parent(\".icon\").parent(\".audio-container\").attr(\"audio-duration\"),url:$(this).parent(\".icon\").parent(\".audio-container\").attr(\"audio-url\"),picurl:\"https://assets.qidian.sxtvs.com/img/qidian/bofangzhong.png\",id:$(this).attr(\"id\")};let status=\"play\";if($(this).attr(\"src\")==paused){status=\"pause\"}typeof bridge == \"object\" && bridge.callHandler('openAudioClick',{...payload,status});typeof onAudioChange == \"function\" && onAudioChange({...payload,status});if(!registerFlag){registerFlag=true;typeof bridge == \"object\" && typeof onAudioChange == \"function\" && bridge.registerHandler('onAudioChange',onAudioChange)}});const onAudioChange = function(payload){if(!payload || !payload.id || !payload.status){return;}let audioImg = $('#'+payload.id);if(payload.status=='play'){audioImg.attr(\"src\",paused);}else{audioImg.attr(\"src\",palyed);}return;};});"</script>

</html>

更多关于HarmonyOS 鸿蒙Next 用web组件加载本地HTML字符串并在特定位置插入图片点击触发原生方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 1楼•7 天前

点击图片触发原生方法，可以直接用原生写

我如果修改html代码，把html中的：改成<img

通过正则表达式进行替换//

深色代码主题

复制

const text = "这是一些文本<!--IMG#1-->，这里是另一些文本<!--IMG23#-->。";
const replacement = “替换后的图片标记”;
// 使用 replace() 方法和正则表达式替换
const newText = text.replace(/<!–IMG#\d±->/g, replacement);
console.log(newText);

zlyuanteng 2楼•7 天前

在HarmonyOS鸿蒙Next中，通过Web组件加载本地HTML字符串并在特定位置插入图片，同时实现图片点击触发原生方法，可以遵循以下步骤：

加载HTML字符串：使用WebView组件的loadData方法，将本地HTML字符串作为参数传入，实现HTML内容的加载。
插入图片：在HTML字符串中，通过<img>标签指定图片的src属性为本地资源路径或Base64编码的图片数据，并添加一个特定的id或class以便后续操作。
图片点击事件：在HTML中为图片添加点击事件监听器，使用JavaScript调用一个预先定义的JS接口（如jsBridge.callNative()）。
原生方法调用：在WebView组件的addJavascriptInterface方法中，将原生方法注册为JS可访问的对象。当JS接口被调用时，触发相应的原生方法。
实现原生方法：在注册的原生方法中，实现所需的功能逻辑。

示例代码（伪代码）：

// 加载HTML
webView.loadData(htmlString, "text/html", "UTF-8");

// 注册JS接口
webView.addJavascriptInterface(new MyJavaScriptInterface(), "jsBridge");

// MyJavaScriptInterface类中实现callNative方法
public class MyJavaScriptInterface {
    @JavascriptInterface
    public void callNative() {
        // 原生方法逻辑
    }
}

注意：上述代码中的loadData和addJavascriptInterface为伪代码，具体实现需参考HarmonyOS的WebView组件API。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html