Как очистить встроенную кнопку подписки на YouTube в одностраничном приложении - PullRequest
Новая
       62

Как очистить встроенную кнопку подписки на YouTube в одностраничном приложении

1 голос
/ 07 февраля 2020

Я встроил кнопку подписки на YouTube в одностраничное приложение, которое я создаю. Он загружается нормально, но когда я перехожу на другой маршрут, я получаю следующее сообщение об ошибке при рендеринге этого маршрута: 

cb=gapi.loaded_0:150 
Uncaught DOMException: Blocked a frame with origin "https://www.youtube.com" from accessing a cross-origin frame.
    at Object.nz [as kq] (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:150:257)
    at jz.send (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:148:261)
    at Fz (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:152:349)
    at https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:152:259

Это происходит, даже когда я go на маршрут, который не имеет кнопка подписки (пока я был на маршруте с кнопкой раньше). Моя главная проблема не в причине ошибки, а в том, что ее вызывает кнопка подписки, которой больше нет на странице. Хуже того, когда я перемещаюсь по приложению, после каждого посещения маршрута, на котором есть кнопка подписки, дополнительный слушатель (или что-то, что вызывает это), кажется, регистрируется. Затем сообщение распечатывается несколько раз при каждом отображении маршрута, по одному разу для каждой кнопки, которая была смонтирована с момента последнего обновления sh. Для справки, я прикрепляю свой компонент: 

import React, { useEffect, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import useScript from 'react-script-hook';
import './YoutubeSubscriberButton.scss';

interface Props {
    youtubeChannel: string
}

type gapiType = typeof gapi;
interface gapiYt extends gapiType {
    ytsubscribe: {
        render: (container: HTMLElement, parameters: {'channel': string, 'layout': string}) => any
    }
}

const YoutubeSubscriberButton: React.FC<Props> = observer(({ youtubeChannel }: Props): JSX.Element|null => {
    const [gapiLoading, gapiError] = useScript({ src: 'https://apis.google.com/js/platform.js'});
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const container = containerRef.current;
        if (!youtubeChannel || !container) {
            return;
        }

        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }

        if (gapiLoading || gapiError) {
            return;
        }

        (gapi as gapiYt).ytsubscribe.render(container, {
            'channel': youtubeChannel,
            'layout': 'full'
        });

        return (() =>{
            while (container && container.firstChild) {
                container.removeChild(container.firstChild);
            }
        });
    }, [youtubeChannel, gapiLoading, gapiError]);

    return (
        <div className="youtube-subscriber-button-component">
            <div className="youtube-subscriber-button-container" ref={containerRef}/>
        </div>
    );
});

export default YoutubeSubscriberButton;

Есть ли для меня хороший способ очистить объект gapi, кнопку подписки на YouTube в iframe или что-то другое, что вызывает это?

...