有没有办法在移动设备上强制从其他来源重新加载iframe？

Question

我正在为体育联赛网站构建一个简单的Google Maps / Calendar工具。它会根据单击的地图标记在iframe中加载多个日历之一。这在台式机上效果很好，尽管在Firefox中确实会在控制台中引起一系列警告：    Content Security Policy: The page’s settings observed the    loading of a resource at inline (“script-src”). A CSP report is being sent.在移动设备上，默认（主）日历会在页面加载时正确加载。点击地图标记后，iframe的内容会消失，但不会重新加载新日历。有没有一种方法可以从移动设备的外部来源强制重新加载iframe？我在Chrome，Safari和Firefox浏览器中的iPhone XR，iPhone 8和Samsung S7上遇到了相同的错误。我试图使用Location.reload方法强制重新加载。这不起作用，因为它要求iframe具有相同的来源。我还尝试了在堆栈溢出中找到的以下代码片段，以解决相关问题：    document.getElementById('cal').src += '';其中#cal是iframe本身的ID。这不会导致功能更改。最后，我使用文档的中的meta标签对Content Security Policy进行了修改。通过包含Google的域（googleapis.com，google.com等），我可以使某些CSP错误停止，但是由于意外阻止其他网站资源而导致同等数量的错误（我不知道我是什么）使用此标签。）标签当前看起来像这样：<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' fonts.googleapis.com 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' maps.googleapis.com fonts.googleapis.com calendar.google.com; frame-src https://calendar.google.com https://accounts.google.com">我知道这是错误的，不安全的，凌乱的以及其他所有内容，但是我只是想使某些事情起作用，所以我可以向后走，解决问题的根源。用于创建此地图/日历工具的相关代码如下：<div id="container">    <div id="map"></div>    <div id="capture"><iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&amp;height=500&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=[e-mail]&amp;color=%23691426&amp;ctz=America%2FVancouver" style="border-width:0" width="500" height="500" frameborder="0" scrolling="no"></iframe></div></div><script type="text/javascript">    //begin by building map. change element ID and vars as needed.    var map;    function initMap() {        map = new google.maps.Map(document.getElementById('map'), {            center: new google.maps.LatLng(49.876837, -119.461071),            zoom: 11,            mapTypeId: 'roadmap',            styles: [{ /*removed for brevity */ }]              }            ]        });脚本继续进行，但是本节包含相关部分：标记构造函数，构造函数数组和onclick函数，以放大所选字段并换出事件日历。