Блог

Главная - Вопросы по программированию - Как загрузить iframe только один раз, когда поместите его в 2 места в React

Как загрузить iframe только один раз, когда поместите его в 2 места в React

#reactjs #iframe

Вопрос:

У меня есть страница, написанная в React:

 const Page = () => {
  const iframeRef = useRef(null);

  const iframe = <iframe src="/some-url" ref={iframeRef} />;

  // place iframe in 2 places
  return (
    <div>
      {iframe}
      ...some other content
      {iframe}
    </div>
  );
};

Что он делает, так это просто загружает iframe и помещает его в 2 места на одной странице.

В текущей реализации страница рассматривает ее как 2 разных фрейма. Оба удара по URL /some-url -адресу , что действительно замедляет весь процесс загрузки и создает нагрузку на сервер.

Я хочу оптимизировать это, просто загрузив iframe один раз. Всего один iframe, попадающий по этому URL-адресу, и как только это будет сделано, создайте его копию и поместите ее на 2-е место.

Как мне этого добиться?

Комментарии:

1. Я не уверен , но причина, по которой фреймы загружаются как разные фреймы, заключается в том, что это разные фреймы. И причина не в React, а в HTML. Может быть, вы можете отложить загрузку iframes? Может быть, загрузить их в didMount?

2. в React нет такой вещи, которая позволяла бы вам использовать один экземпляр и помещать его в два разных места. Эти два iframe должны быть физически двумя экземплярами, хотя они могут быть получены из одного и того же компонента. Однако, если я загружу содержимое веб-страницы один раз, смогу ли я отобразить результат в двух разных местах? да, ты можешь. Поэтому вам нужно отобразить html в качестве содержимого API.

Метки: ,