有没有办法在移动设备上强制从其他来源重新加载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函数，以放大所选字段并换出事件日历。