Написание jQuery для изменения размеров динамического iframe при нажатии
Я пытаюсь создать небольшой скрипт, который изменит размеры iframe при нажатии iframe. Вот код iframe:
$("#myKAframe").click(function () {
$('#myKAframe').css({ "height": "100%", "width": "100%" });
}); <script
src = "https://code.jquery.com/jquery-3.5.1.js"
integrity = "sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc = "
crossorigin = "anonymous"></script>
<iframe id = "myKAframe" src = "ka.html" title = "KA"
style = " padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom; right: 0px;">
</iframe>
Моя проблема в том, что, во-первых, код не работает. И во-вторых, я не знаю, как сделать jquery таким, чтобы при повторном нажатии на iframe он возвращался к малым размерам. Я новичок в jQuery, поэтому любая помощь, которую я могу получить, будет очень признательна.
toggleClass() пригодится для второй части вашего вопроса.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Первая проблема заключается в том, что <iframe></iframe> сам по себе не кликабельный элемент. Щелчок «на» iframe на самом деле является кликом по содержимому внутри iframe.
Внутри iframe можно обнаружить щелчок. Взгляните на другие обсуждения того, как обнаружить щелчок внутри iframe здесь, на SO.
как написано здесь , вы не можете добавить прослушиватель кликов в iframe, но вы можете добавить прослушиватель в тело iframe (взято из здесь)
а для создания системы переключения вы можете просто создать логическое значение, которое будет изменяться при каждом нажатии
var big = false;
$(function () {
$("#myKAframe").on("load",function(){
document.getElementById("myKAframe").contentWindow.document.body.onclick =
function() {
if (big) $('#myKAframe').css({ "height": "auto", "width": "auto" });
else $('#myKAframe').css({ "height": "100%", "width": "100%" });
big = !big;
}
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</script>
<iframe id = "myKAframe" src = "https://www.example.com/" title = "hello"
style = " padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom; right: 0px;">
</iframe>Большое спасибо! Это имеет большой смысл. Но когда я пытаюсь реализовать код, я продолжаю получать «неопределенную ссылку $», я не думаю, что знаю достаточно jquery, чтобы понять, в чем проблема, но есть ли что-то, чего мне не хватает в отношении размещения $ в фрагмент кода, который вы предоставили.
вы добавили jquery?
Ага. На самом деле это были просто некоторые файлы, названные вне области видимости. Теперь это работает! Еще раз спасибо!
@ConstantFuture, пожалуйста, примите один из ответов
Вам нужно либо поместить свой скрипт в обратный вызов
document.ready, поместить его после разметки, на которую он ссылается, либо использоватьevent delegation. Все темы избитые. Затем подумайте, как вы будете отслеживать состояние с помощью переменной, файла cookie, локального хранилища или чего-то еще. Эта часть вашего вопроса слишком широка.