Есть ли способ принудительно перезагрузить 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 из внешнего источника для мобильных устройств?Я столкнулся с такими же ошибками на iPhone XR, iPhone 8 и Samsung S7 в браузерах Chrome, Safari и Firefox.

Я попытался перезагрузить систему с помощью метода Location.reload.Это не работает, так как требует, чтобы iframe был одного происхождения.Я также попытался выполнить следующий фрагмент кода, который обнаружил при переполнении стека, для связанной проблемы:

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

, где #cal - это идентификатор самого iframe.Это не вызвало изменений в функциональности.

Наконец, я поиграл с изменениями в Политике безопасности контента, используя метатег в документе.Я могу прекратить некоторые ошибки CSP, включив домены Google (googleapis.com, google.com и т. Д.), Но вызываю такое же количество ошибок, случайно заблокировав другие ресурсы веб-сайта (я не знаю, что яс этим тегом.) В настоящее время тег выглядит следующим образом:

<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 для увеличения выбранного поля и замены календаря событий.

Answer 1

Как прокомментировал @ducmai, ответ оказался смущающе простым;Добавляя строку

calsec.innerHTML = null;

перед вставкой нового фрейма в календарь, календарь загружается немного медленнее (примерно одна секунда задержки при обновлении), но теперь отображается на всех устройствах!

Кроме того,Мне нужно было установить каждый календарь на всеобщее обозрение.Большинство из них были, но некоторые возвращали ошибку X-Frame, поскольку я забыл правильно настроить календарь.