WedX - журнал о программировании и компьютерных науках

Как вы прокручиваете iframe изнутри с помощью jquery?

Я использую теневой ящик, который генерирует iframe для отображения сведений о продукте на странице. Поскольку страница сведений может быть довольно длинной, клиенту нужна кнопка «Дополнительно», которая прокручивает страницу вниз (очевидно, полосы прокрутки справа от iframe недостаточно).

Вот код, который я пробовал, чтобы заставить iframe прокручиваться:

$(document).ready(function()
{
$(".moreButton img").click(function() {
    scrollbottom();
});
});

function scrollbottom() {
var x = 250; // this number is a temporary placeholder
var t = 500;
$("iframe").animate({ scrollTop: x }, t);
}

Я также пытался использовать тело вместо iframe, но безрезультатно. Любые идеи? Спасибо!


Ответы:


1

Вот так: (Проверено)

$("iframe").contents().children().animate({ scrollTop: x }, t);
18.05.2010
  • $('iframe').contents().animate({ scrollTop: x}, t); Кажется, это тоже не работает. 18.05.2010
  • @DavidReynolds: Вы, вероятно, боретесь с SOP. Какая у вас ошибка? 04.12.2015

  • 2

    Создайте функцию в родительском javascript следующим образом:

    function scrollToPoint(top) {
        $("html, body").animate({ scrollTop: top }, "slow")
    }
    

    и вызовите эту функцию в iframe следующим образом:

    window.parent.scrollToPoint(top);
    

    В хроме должно работать, в фаерфоксе еще не проверял.

    30.10.2016

    3

    В итоге это сработало:

    $('html,body').animate({ scrollTop: x }, t);
    
    18.05.2010
  • вышеприведенная строка решила вашу проблему? я получаю ту же проблему, но не могу решить с помощью строки выше 19.01.2013
  • Да, в итоге это сработало для меня. Единственный совет, который я хотел бы вам дать, - убедиться, что область вашей функции верна. Если ваш код находится в самом iframe, помните, что он не будет запускаться автоматически, как на только что загруженной странице. Вам придется вызывать его из родительского фрейма. 19.01.2013

  • 4

    В Chrome мне пришлось специально выбрать элемент body:

    $('#my-iframe').contents().find('body').animate({scrollTop:90},500);

    30.01.2015
    Новые материалы

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..


    Для любых предложений по сайту: [email protected]