A local file is introduced using iframe in the vue component of uniapp, and the result is not displayed

demand:在uniapp项目vue组件中,显示项目某个html页面

First thought:

1. 使用iframe
2. 使用web-view

Solution 1: With the help of iframe, import local files

Failed : In the vue project component, iframe is used to import the html file of the same level of the project, but what is displayed on the page is not the html page content I introduced, but the project homepage.


The requirement cannot be achieved by using iframe. According to the reason of the error, after repeated research, it is impossible to switch between several local introduction methods:


1 直接使用本地路劲:失败

<iframe src="/static/maps.html" id="dtdt-map" class="dtdt-map" name="ifr1" scrolling="yes"></iframe>

2 使用变量名引入:失败

<iframe scrolling="no" frameborder="0" id="dtdt-map" class="dtdt-map" :src="url"></iframe>

Scheme 2: With the help of web-view

Later I thought, could it be due to official restrictions? Then I went to read the official uniapp document and found that there is one in the document that can solve the current problem, namely:

web-view Click to go to the official website web-view explanation

Screenshot of official website web-view explanation

Insert picture description here


Instructions:

<web-view src="/static/maps.html"></web-view>


Special Note:微信小程序不支持本地页面引入

Perfectly introduce page content

Realization effect diagram

Guess you like

Origin blog.csdn.net/m0_46442996/article/details/114999916