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

Могу ли я изменить источник iFrame изнутри?

Я не могу четко сформулировать этот вопрос; прочитай внимательно. Я хочу знать, возможно ли для источника iFrame (страницы, отображаемой через iFrame) изменить его внутренний источник без изменения источника родительской страницы iFrame.

Например:

Если я создаю iFrame на своей веб-странице и нажимаю традиционную ссылку в iFrame, то будет изменен источник (расположение) главной страницы (страница, на которой я создал iF), а не содержимое iFrame.

Вместо этого я хочу изменить источник iFrame с помощью содержимого во фреймах (это может быть междоменное содержимое) на новое место внутри сам фрейм.

Я заметил различное поведение в JS-методах изменения местоположения страницы. В этом вопросе SO некоторые из них подробно описаны. Я заметил, что некоторые методы изменения страницы ведут себя по-разному, например, не разрешают пользователю использовать кнопку «Назад» для перехода на страницу, с которой он перешел.

Используя один из этих разных методов изменения местоположения JS, я подумал, что это возможно, но я не уверен, как это будет сделано.

Вопрос:

При условии, что запрошенная веб-страница iFrame взаимодействует с ней, возможно ли добиться результата, при котором ресурс iFrame меняет свое собственное местоположение? Если да, то как это делается?

javascript iframe jquery cross-domain
16.04.2014

  • Если бы я изложил вашу просьбу своими словами, вы бы сказали, что это правильно? Вы хотите, чтобы ссылка или функция javascript в вашем iframe изменили текущую страницу, на которой находится пользователь (родительская страница, а не страница iframe). Верный? 16.04.2014
  • Не совсем. Результат вместо этого является источником изменения iFrame без изменения / добавления новых местоположений в браузер. Пользователь щелкает ссылку в iFrame, и iFrame изменяется на эту ссылку. Возможно, для этого iFrame и страница должны взаимодействовать. @LawrenceJohnson 16.04.2014

Ответы:


1

Для любых тегов привязки в iframe попробуйте установить в качестве цели _self. Нравится:

<a href="/mynewlinkwithiniframe.html" target="_self">Test</a>

Я поиграю с ним, но я знаю, что это был стандарт для старых рамок.

РЕДАКТИРОВАТЬ На основании некоторых проведенных мною тестов действие по умолчанию для якорных ссылок в iframe заключается в загрузке нового контента в iframe. target = "_ self" является избыточным, если что-то другое не отменяет его. Возможно, вам следует предоставить дополнительную информацию об исходном коде, если это не решает проблему за вас.

Я также мог бы сделать предположение, что вы столкнулись с проблемой, используя javascript. Если вы используете window.location.href, вы захотите изменить это следующим образом:

Вместо того:

window.location.href = 'newpage.html';

Пытаться:

window.open('/newpage.html', '_self');
16.04.2014
  • Это вопрос возможности, а не того, что я использую в текущем проекте. Например, вы хотите создать веб-сайт портфолио, на котором посетители профиля веб-разработчика могут взаимодействовать с его веб-сайтами в iFrame, и если они щелкнут ссылку внутри, содержимое iFrame изменится, а не изменится веб-сайт портфолио, или новая вкладка, открывающаяся в браузере пользователя. 16.04.2014
  • Тогда да. Проще говоря, да. :) 16.04.2014
  • Хорошо, очень хорошо, это означает, что в будущем появятся отличные возможности. Спасибо! 16.04.2014
  • На самом деле так все рамы и были созданы для работы. Поищите Stealth Redirect, когда у вас появится такая возможность. Это действительно примитивный способ переадресации домена, который до сих пор используется пещерными людьми. :) 16.04.2014

    • 2

    Сделайте вот так:

    window['iframe_name'].src = 'https://yourdomain.com';

    Или сделайте так:

    document.getElementById('iframe_id').src = 'https://yourdomain.com';

    В соответствии с комментарием вам необходимо определить тег ссылки на _self:

    <a href="#" target="_self">Link</a>
    16.04.2014
  • Как мне обмениваться данными между источником iFrame (источник iFrame должен управлять расположением, а не главной страницей) и страницей, чтобы указать главной странице выполнить этот код? 16.04.2014
  • Взгляните на комментарий, который я только что оставил для Лоуренса, выше. 16.04.2014

    • 3

    Я верю, что postmessage () поможет вам

    https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage

    16.04.2014
  • Это очень полезно для этой и других целей, спасибо! 16.04.2014

    • 4

    Спасибо, Лоуренс Джонсон, что напомнил мне. И для этого вам даже не нужен Javascript. «Целью» ссылки является имя окна, если оно соответствует атрибуту имени в окне или iframe, ссылка будет открываться в iframe. Ссылка может находиться внутри или вне iframe. Я только что создал удивительно простую программу просмотра панорам по адресу https://ab1jx.1apps.com/pix/panoramas/index.html, используя этот принцип. У каждого изображения есть своя собственная оболочка html. Когда вы нажимаете ссылки под iframe, они загружают оболочку в свою цель picframe, изменяя изображения в процессе. Посмотри на источник.

    04.08.2016
    Новые материалы
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 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]