小程序，APP 嵌入H5，iframe 沙盒属性 sandbox 实例经验总结

需求：

        1、小程序使用 web-view  打开一个网页（A）、App 使用 web-view 打开一个网页（A）

        2、网页（A）调用接口，后端接口返回一个拼接好的链接返回给网页端

        3、网页端（A） 需要打开跳转到后端返回的链接。

方案：

        网页（A）使用的是 Vue 项目，因此 打开后端返回的链接时，使用 iframe 组件。

        网页（A） 是列表选项页面，需要处理无数据，单个数据，多个数据的情况。

        节点代码示例：

<div class="box">
		<div class="list-select">
			<t-cell-group>
				<t-cell
					class="cell"
					:title="item.title"
					description=""
					arrow
					v-for="item in list"
					@click="pageToEvent(item)"
				>
					<template #description> color：{{ item.color }} </template>
				</t-cell>
			</t-cell-group>
		</div>
		<div class="list-link">
			<iframe :src="src" @load="onLoad" class="web-view-iframe"  id="iframe"  sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation"></iframe>
		</div>
	</div>

        在当前路由页面，单个数据或无数据直接使用 iframe 打开链接

        在当前路由页面，多个数据需用户自己选择，选择后跳转到新的路由 ，使用 iframe 打开。

        

当后端返回的链接，里面有再次跳转第三方链接时，如果使用了 sandbox ，可能出现 无法跳转问题。原因如下

网页A 如果使用 window.location.href = url，也可以解决，但小程序在 IOS 中，单数据的情况下，会出现，小程序打开网页 A ，网页 A 马上跳转到后端返回的链接。这个适合，小程序返回上一级，会先从后端链接返回到  网页A，网页A 如果刷新就会调用接口，然后直接再次重定向跳转。

甚至可能出现 网页A 空白的情况。 小程序 安卓下不会有该情况，返回键，直接返回到小程序原生页面。