Вставка и выполнение условного JavaScript

Question

Работаем над дизайном Mobile First и хотим условно загрузить и выполнить JavaScript на основе ширины браузера.

ОБНОВЛЕНИЕ: (больше информации о том, что я делаю)

I 'м, чтобы условно загрузить разные размеры объявлений Google DFP в зависимости от ширины окна браузера.Таким образом, настольный компьютер / iPad может видеть рекламу шириной 720 пикселей, широкое мобильное устройство может видеть рекламу 480px, а обычное мобильное устройство - 320px.

В Google DFP используется асинхронный метод, в котором основной код находится вголова.Рекламные вызовы затем выполняются с помощью комбинации div с пронумерованным идентификатором и вызова функции с одинаковым номером.

Так что в то, что я пытаюсь сделать, мне нужно вставить как пронумерованный div, так ивызов конкретной пронумерованной функции в div, где я хочу, чтобы появился конкретный вызов объявления.

Поискал условные примеры, и это сработало в моем тесте:

<div id="ad"></div>
<script type="text/javascript">
var ad = document.getElementById("ad");
if (document.documentElement.clientWidth > 640) {
ad.innerHTML = "big";
}
if (document.documentElement.clientWidth < 640) {
ad.innerHTML = "small";
}
</script>

Очевидно, это просто тестпроверка ширины, а не вызов объявления.

Если я правильно понимаю, innerHTML не будет работать, если мне нужно динамически загрузить и выполнить некоторый JavaScript.

В основном, когда я проверяю размерЯ должен ввести рекламный вызов, подобный этому, в #ad div:

<div id='div-gpt-ad-xxxxxxxxxxx-2' 
style='width:728px;height:90px;margin:auto'><script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-xxxxxxxxxxx-2'); });
</script></div>

Обратите внимание на «-2» как в div, так и в функции.Это будет по-разному для разных размеров объявлений.

Абсолютно новый для манипулирования DOM, поэтому любая помощь очень ценится.

Answer 1

Вы правы в том, что элементы сценария, вставленные с использованием свойства innerHTML, не выполняются.

Простое решение состоит в том, чтобы собрать вставленные элементы сценария и заменить их новыми элементами, где будет выполняться код,например,

function insertAndExecute(id, markup) {

    var sOld, sNew, scripts;
    var s;
    var el = document.getElementById(id);

    if (el) {
        s = document.createElement('script');
        el.innerHTML = markup;
        scripts = el.getElementsByTagName('script');

        for (var i=0, iLen=scripts.length; i<iLen; i++) {
            sOld = scripts[i];
            sNew = s.cloneNode(true);
            sNew.type = sOld.type;

            if (sOld.src) {
                sNew.src = sOld.src;
            } else {
                sNew.text = sOld.text;
            }
            sOld.parentNode.replaceChild(sNew, sOld);
        }
    }
}

Намного лучше, если сценарии имеют атрибут src и загружают внешний файл.

Как говорит jfriend00, если вы можете определить разметку длябыть вставленным во время загрузки страницы, document.write является жизнеспособной альтернативой, поскольку это приведет к выполнению включенных сценариев.Но вы не можете использовать его после завершения загрузки страницы.

Редактировать

Что касается получения ширины окна:

var width = window.innerWidth || document.body.clientWidth;

должно сделать.Обратите внимание, что в IE значение clientWidth на 20px меньше ширины окна, поскольку позволяет использовать вертикальную полосу прокрутки.Но это не должно иметь значения.

Кроме того, clientWidth не следует измерять до тех пор, пока документ не завершит загрузку, чтобы макет был завершен (используйте onload или что-то позднее), и убедитесь, чтодокументы имеют DOCTYPE, так что IE находится в стандартном режиме (или «почти стандартном режиме» или что-то в этом роде).

Вам также может быть интересно, как измерить область просмотра .

Answer 2

Если вы новичок в манипулировании DOM, тогда остановитесь прямо сейчас и найдите библиотеку JavaScript, которая вам нравится. DOM, безусловно, самая разочаровывающая часть использования JavaScript в браузере, поэтому не разрушайте свой первый опыт работы с языком, не используя библиотеку, которая поможет вам в этом. Два хороших варианта: YUI и jQuery . Это важно, потому что вы не можете точно определить ширину экрана с помощью document.documentElement.clientWidth. Различные браузеры используют разные свойства для него.

Что касается вашего вопроса, то в данном случае это просто вопрос запуска кода в вашем скрипте после вставки контента в рекламный контейнер.

<div id="ad"></div>
<script>
  document.getElementById('ad').innerHTML = '<div id="div-gpt-ad-xxxxxxxxxxx-2" style="width:728px;height:90px;margin:auto"></div>';
  if (screenWidth > 640) {
    googletag.cmd.push(function() {
      googletag.display('div-gpt-ad-xxxxxxxxxxx-2');
    });
  } else {
    // do something else
  }
</script>