开发背景：cordova+vue 混合开发ios app

问题简述：在xcode模拟器（真机）上iframe内容不显示，以及内容显示不完全

1、在xcode模拟器（真机）上iframe内容不显示解决方案：

1-1在cordova 项目的config.xml中配置

<access origin="*" subdomains="true" />

<allow-navigation href="*" />

1-2在vue  项目的index.html的head中增加如下代码

<meta http-equiv="Content-Security-Policy"  content="default-src *; frame-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval';script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

2、在xcode模拟器（真机）上内容显示不完全

可以在iframe外加一层div,设置样式-webkit-overflow-scrolling:touch;overflow:scroll;让超出div的内容可以通过touch来滚动；

备注：

1 -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
2 -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

代码如下：

<template>

<div class="page-content">

<mt-header :title="title">

<i class="iconfont iconarrow-right" slot="left" @click="click_go_back"></i>

</mt-header>

<div :style="{height:scrollHeight+'px'}" class="html-box">

<iframe

:src="iframeUrl"

frameborder="0"

scrolling="yes"

></iframe>

</div>

</div>

</template>

<script>

export default {

data() {

return {

title: "",

iframeUrl:""

};

},

created() {

this.title=this.$route.query.title;

this.iframeUrl=this.$route.query.iframeUrl;

//console.log( this.iframeUrl);

},

methods: {

click_go_back() {

this.$router.go(-1);

}

},

computed: {

scrollHeight: () => {

return document.documentElement.clientHeight - 44;

}

}

};

</script>

<style lang="scss" scoped>

.page-content {

width: 100%;

.html-box {

width: 100%;

overflow: auto;

-webkit-overflow-scrolling: touch;

iframe {

width: 100%;

//height: 100%;

}

}

}

</style>