Как предотвратить запуск HTML-кода?
Я стараюсь встроить несколько фреймов на одну страницу, не замедляя ее. Когда я встроил единственный iframe, он работал без сбоев; добавили второй и третий, и все они были медленнее, несмотря на то, что одновременно отображался только один (с использованием JScript). Я предполагаю, что это связано с тем, что код iframe все еще выполняется.
Как я могу выполнить код условно? В моем случае всякий раз, когда нажимается кнопка.
Помощь приветствуется.
Fiddle for the exact code I use, with actual content replaced by IDs and iframes by p's: http://jsfiddle.net/aof89Ljt/55/
HTML для окон iframe:
<p id = "ifr1">
ifr1
</p>
<p id = "ifr2" style = "display:none;">
ifr2
</p>
<p id = "ifr3" style = "display:none;">
ifr3
</p>
Обновлено: Новая ссылка JFiddle с включенным JScript. Описание конечной цели: я нажимаю кнопку, которая отображает другой встроенный график Desmos, затем другой график, затем первый график - в цикле, по одному (см. Код). Демонстрационный gif: https://puu.sh/Bjpil/da9a038e11.gif
ОБНОВЛЕНИЕ 2: Решение найдено; полный код: https://jsfiddle.net/32uxrhmw/49/
ОБНОВЛЕНИЕ 3: Значительно оптимизированный код: https://jsfiddle.net/32uxrhmw/92/
Лучше поместить свои фреймы в атрибут данных элемента, и когда вы нажимаете кнопку, вы получаете его из атрибута данных и устанавливаете его как innerHTML элемента.
Правильный @DeepakSharma
Не уверен, как это сработает @Muhammad
Мой обновленный ответ не должен замедлять время начальной загрузки, потому что значение URL-адреса добавляется только в источник onclick. Может потребоваться настройка, чтобы включить цикл, но это другой вопрос.
@OverLordGoldDragon - Я думаю, что вы здесь новичок, так что просто чтобы вы знали, как правило, считается плохим тоном продолжать расширять сферу вашего запроса. Люди тратят время, чтобы ответить вам, а затем вы меняете игровое поле. В будущем вам следует попытаться разбить свои проблемы на отдельные проблемы и публиковать их отдельно - например, 1) проблема начальной загрузки страницы с iFrames, 2) ваш эффект «зацикливания» и т. д. Что касается эффекта зацикливания, как вы это делаете - загрузка гифку как в вашем примере? Если это так, вы, вероятно, просто захотите загрузить изображение в том же формате, который я предложил для окон iframe.
Ваши ответы также должны быть отдельными ответами с кодом здесь, на сайте, а не обновлениями вопроса, которые представляют собой просто сторонние ссылки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно добавить триггер события onclick = "<your function>" к элементам, которые вы хотите «сделать».
Простой пример:
<button onclick = "swap()">Button</button>
<iframe style = "display: none;" data-url = "https://www.example.com" id = "iframe">
<p>Your browser does not support iframes.</p>
</iframe>
<script>
function swap() {
e = document.getElementById('iframe'); // get iframe
url = e.dataset.url; // get desired url attribute stored in data-url
e.setAttribute("src", url); // add the iframe src with desire url
e.removeAttribute("style"); // remove styling that hid it otherwise
}
</script>ОБНОВЛЕНО, чтобы лучше подходить к вопросу.
ОБНОВЛЕНО снова, чтобы включить хорошее предложение @Joe Fitzsimmons по обработке источников iframe (в его ответе).
ЗАКЛЮЧИТЕЛЬНОЕ ДОБАВЛЕНИЕ ПОСМОТРЕТЬ КОД:
Глядя на ваш последний код, кажется, что вы хотите сделать следующее:
загрузить страницу с одним iframe;
затем измените iframe, отображаемый при нажатии кнопки.
Если это то, что вы хотите, вы можете использовать этот гораздо более простой код:
(Примечание: я использовал ваш образец кода в качестве основы, но не вставлял никаких URL-адресов src - ваш может быть частным, но даже если не все они показали одинаковый результат, это может сбить с толку других читателей)
<style>
.tdropbtn {
background-color: white;
font-size: 16px;
border: none;
cursor: pointer;
color: #0066CC;
}
</style>
<center>
<iframe id = "frame" src = "https://url1" width = "500px" height = "400px" frameborder=0></iframe>
</center>
<div style = "display:inline;">
<center>
<button onclick = "swap()" class = "tdropbtn">[+]</button>
</center>
</div>
<script>
var counter = 1;
var firstFrame = "https://url1";
var secondFrame = "https://url2";
var thirdFrame = "https://url3";
var e = document.getElementById("frame");
function swap() {
if (counter == 0){
e.src = firstFrame;
counter++;
}
else if (counter == 1){
e.src = secondFrame;
counter++;
}
else if (counter == 2){
e.src = thirdFrame;
counter = 0;
}
}
</script>
Notepad ++ не распознает URL-адрес данных как допустимый атрибут HTML, и iframe больше не отображается. Кроме того, какой смысл устанавливать URL-адрес в функции, если он, кажется, установлен в iframe?
@OverLordGoldDragon - это обычный шаблон атрибута, который будет работать в браузерах. См .: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…
@OverLordGoldDragon - при запуске кода открывается iframe. Он изначально скрыт, поэтому вы не получите уродливый пустой квадрат. Он не установлен в атрибуте src iframe, потому что это приведет к его загрузке при загрузке страницы - это то, что вы хотели, - то есть не замедление начальной загрузки страницы, а загрузка только при нажатии кнопки.
@OverLordGoldDragon - Почти. data-url - это место для хранения значения URL. Так что поместите URL-адрес там, где у вас есть #, а не в функции. Если у вас был URL-адрес в функции, замените его на «src» (с кавычками) - у меня это сработало.
@OverLordGoldDragon - Кроме того, в качестве отступления вам, вероятно, следует избегать использования элемента <center> - хотя он все еще поддерживается браузерами, это устаревший элемент (см. developer.mozilla.org/en-US/docs/Web/HTML/Element/center). Вместо этого просто стилизуйте элементы напрямую, используя элементы оболочки, только если это необходимо.
Я заставил это работать - спасибо за ваш ответ. Кроме того, я использовал removeAttribute ("src") "для неотображаемых окон iframe. Полный код: jsfiddle.net/32uxrhmw/49
Превосходное упрощение кода - применено: jsfiddle.net/32uxrhmw/92 В качестве побочного вопроса, как мне центрировать iframe без <center>? text-align и margin auto, похоже, ничего не делают.
@OverLordGoldDragon - в зависимости от вашей цели, либо стилизуйте его напрямую, либо оберните его в <div> и добавьте к нему стили. По сути, в наши дни лучше всего хранить html и стили отдельно. Для центрирования я бы, вероятно, добавил класс в оболочку div со свойством margin: 0 auto;.
Одна из идей - загрузить / удалить источник iframe onClick.
Это примерное представление о том, что вы могли бы сделать:
function Swap(id, url) {
document.getElementById(id).src = url;
}
Вам также придется показывать и скрывать iFrames. Надеюсь, это поможет вам встать на путь. Я не совсем уверен, какова ваша конечная цель.
Итак, вы имеете в виду, что вы показываете только первый iframe, и одно нажатие кнопки или какое-то событие вы скрываете первый iframe и показываете второй, и так далее?