有没有办法在移动设备上强制重新加载来自不同来源的 iframe？答案

【问题标题】：Is there a way to force reload an iframe from a different origin on mobile devices?有没有办法在移动设备上强制重新加载来自不同来源的 iframe？
【发布时间】：2019-09-21 10:03:29
【问题描述】：

我正在为体育联盟网站构建一个简单的 Google 地图/日历工具。它根据单击的地图标记在 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？我在 iPhone XR、iPhone 8 和 Samsung S7 上的 Chrome、Safari 和 Firefox 浏览器中遇到了同样的错误。

我尝试使用 Location.reload 方法强制重新加载。这不起作用，因为它要求 iframe 是同源的。我还尝试了以下代码 sn-p 我在堆栈溢出中发现的相关问题：

    document.getElementById('cal').src += '';

其中 #cal 是 iframe 本身的 id。这不会导致功能发生变化。

最后，我在文档的 .我可以通过包含 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=example.com_mgj0i3q12ang1as82p8ggf3fuc@group.calendar.google.com&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 */ }]
              }
            ]


        });


        /* set location marker variables within this array of arrays (name, lat, long, calID). Called by the marker constructor based in array index */


        markers = [
            ['Parkinson Sports Fields', 49.88264, -119.46045, 'example.com_ee05ufe760mls53v7i8juk21hc@group.calendar.google.com'],
            ['Rutland Sports Fields', 49.89953, -119.38019, 'example.com_kkp2n6a430b5hp1nsneins9rko@group.calendar.google.com'],
            ['Mission Sports Fields', 49.83979, -119.47623, 'example.com_9b03spb4qm2alg3g3kqhn7sols@group.calendar.google.com'],
            ['Rosewood Sports Field', 49.87567, -119.56956, 'example.com_d2837h2fnv0f5aon52hfisuev8@group.calendar.google.com'],
            ['Shannon Woods Sports Field', 49.8669, -119.60595, 'example.com_dg3t7cph204esc98qeq81egk4s@group.calendar.google.com']
        ];
        var marker, i;
        for (i = 0; i < markers.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(markers[i][1], markers[i][2]),
                title: markers[i][0],
                label: {
                    text: markers[i][0],
                    fontSize: "12px",
                    fontWeight: "bold"
                },
                map: map,
                icon: markerIcon,
                calURL: '<iframe id="cal" src="https://calendar.google.com/calendar/embed?mode=AGENDA&amp;height=500&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=' + markers[i][3] + '&amp;color=%23691426&amp;ctz=America%2FVancouver" style="border-width:0" width="500" height="500" frameborder="0" scrolling="no"></iframe>'
            });

            //Attempts to smoothly zoom on marker click. Currently buggy; exploring resolutions.

            google.maps.event.addListener(marker, 'click', function() {
                map.setCenter(this.getPosition());
                for (z = 1; z < 16; z++) {
                    map.setZoom(z)
                }


                /* this section replaces the iframe in the schedule div with the individual field's calendar. */


                var calsec = document.getElementById('capture');
                calsec.innerHTML = this.calURL;
                document.getElementById('cal').src += '';


            });

        }

脚本继续，但此部分包含相关部分：标记构造函数、构造函数数组和用于放大所选字段并换出事件日历的 onclick 函数。

【问题讨论】：

也许你可以删除并再次添加 iframe

标签： javascript iframe mobile

【解决方案1】：

正如@ducmai 评论的那样，答案竟然简单得令人尴尬；通过添加行

calsec.innerHTML = null;

在插入新日历 iframe 之前，日历加载速度稍慢（刷新延迟 1 秒左右），但现在显示在所有设备上！

另外，我需要将每个日历都设置为公开。大多数是，但有些返回 X-Frame 错误，因为我忘记正确设置日历。

【讨论】：