Мне нужно сделать скрипт внутри div - PullRequest
Новая
       7

Мне нужно сделать скрипт внутри div

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

Привет, мне нужно отобразить элемент div со скриптом внутри него:

что-то вроде: 

 <div id="div-id-for-squaretile1" style="width: 300px; height: 250px;">
    <script>
      googletag.cmd.push(function() {
        googletag.display('div-id-for-squaretile1');
      });
    </script>
  </div>

Я использую хук в своем компоненте: 

const GooglePublisherTag = ({ id }) => {
  useGptSlot(id);
  return <div id={id} />;
};

useGptSlot Hook выглядит так: 

const useGptSlot = (id) => {
  useEffect(() => {
    const googletag = window.googletag || { cmd: [] };
    googletag.cmd.push(() => {
      googletag.display(id);
    });
  }, [id]);
};

Однако мой код не отображает скрипт в div:

Вместо этого он выводит: 

<div id="div-id-for-squaretile1" data-google-query-id="CLGYq8Hhv-cCFcfbwAodGgcK0g" style="width: 250px; height: 250px;">
  <div id="google_ads_iframe_/21848388897/Development/Geo-Landing_0__container__" style="border: 0pt none; width: 250px; height: 250px;"></div>
</div>

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

1 Ответ

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

Гипотетический путь - с опасных указателем HTML. Однако , который не будет работать , поскольку вам нужно вручную создавать <script> теги с document.createElement(), так как сценарии, добавленные через innerHTML, фактически не будут интерпретироваться см. Также MDN .

Вместо этого вы можете использовать useCallback ref, чтобы получить указатель на элемент, который вы будете создавать, а затем вручную создать тег <script> и добавить его в нужное место. Рассмотрим приведенный ниже пример, в котором тег <script> будет добавлен в качестве дочернего элемента к требуемому элементу, и для его src будет установлено значение jQuery. Я не думаю, что ваш AdSense заботится, когда его скрипт загружается, но для этого примера мы ждем секунду, а затем просто проверяем, действительно ли jQuery существует в нашем контексте (что демонстрирует, что скрипт запущен). 

const {useState, useEffect, useCallback, Fragment} = React;

function Scripter() {
  const script = useCallback(el => {
    console.log("cb");
    if(!el) {
      console.log("No el");
      return;
    }
    const s = document.createElement("script");
    el.appendChild(s);
    s.src = "https://code.jquery.com/jquery-3.4.1.js";
    
    setTimeout(() => {
      console.log("jQuery should have been loaded by now");
      console.log(typeof $);
    }, 1000);
  }, []);
  
  return (
    <div ref={script}>Hello</div>
  );
}

function App() {
  return <Scripter />;
}

ReactDOM.render(<App />, document.getElementById("app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Однако, зачем вообще беспокоиться о теге script? googletag.display(divOrSlot) принимает элемент, поэтому я просто запустил бы код, который тег скрипта будет содержать внутри компонента.

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

const {useCallback} = React;

window.googletag = window.googletag || {cmd: []};

function useGpt(el) {
  if (!el) {
    console.log("No el provided");
    return;
  }
  
  googletag.cmd.push(function() {
    googletag.display(el);
  });
}

function DummyElement() {
  const cb = useCallback(useGpt, []);
  
  return (
    <div ref={cb}>Should get tagged</div>
  );
};

function App() {
  return <DummyElement />;
}

ReactDOM.render(<App />, document.getElementById("app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

<div id="app"></div>
...