Нажать на изображение и вывести сайт в новом окне в iframe

@knuthamsun · Регистрация: 16.08.2014

Студворк — интернет-сервис помощи студентам

Всем привет! Ребят, задолбался я перебирать туеву хучу вариантов.. Сам я почти новичок, так вот как сделать, чтоб при нажатии на картинку, брался её URL (не источник картинки, а "a href = site.ru" куда она ведёт при нажатии) и этот сайт site.ru открывался в новом окне в iframe?
Спасибо.

@Raisin Zn · 29.06.2016, 15:49

Сообщение от knuthamsun

чтоб при нажатии на картинку, брался её URL (не источник картинки, а "a href = site.ru" куда она ведёт при нажатии)

Вы чего то не договариваете, у IMG нет HREF.
Имеется введу ссылка с анкором картинки?

@knuthamsun · 29.06.2016, 17:01 **[ТС]**

Скажем, пусть будет картинка, по нажатию на которую идёт переход на другой сайт. Нужно сделать переход, только сайт на другой странице отобразить в iframe.
P.S. а сверху, над iframe, например, реклама, таймер или ещё что-то
P.S.S. я хочу для развития понять суть этого дела

@BANO · 29.06.2016, 17:30

knuthamsun, покажите html картинки с ссылкой

для того, чтобы сделать вот такой вот дурацкий рекламный ход, вам нужно будет иметь страницу на вашем сайте, которая будет заменять url находящегося внутри фрейма на тот url, который скорее всего будет идти через get параметр или через якорёк

@knuthamsun · 29.06.2016, 17:34 **[ТС]**

А можно приблизительный набросок кода? Суть уловить.

@BANO · 29.06.2016, 17:39

knuthamsun,

это я у вас прошу код, чтобы суть уловить

@knuthamsun · 29.06.2016, 17:44 **[ТС]**

Вот смотрите до чего я дошёл:

Файл1:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
 
 
        $(document).ready(function () {
            var link = $("a",this).attr("href"); //берём тег а => конкретно src => .attr(src)
            alert(link);
            localStorage.setItem('x',link);
 
            $("#img").click(function(){
 
                window.open('click_iframe_2.php','_blank');
 
            });
            
 
        });
    </script>
    <title>Document</title>
</head>
<body>
    <a id = "a_link" href = "google.ru">
    <img id = "img" src = "https://www.cyberforum.ru/images/site.jpg" width="200" />
</a>
<br />
    <input type = "submit" value = "Перейти" />
 
</body>
</html>

Передаёт на страницу 2:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        alert(localStorage.getItem('x'));
        window.frames["frame_name"].document;
    </script>
</head>
<body>
    <iframe src = <?php echo "http://"."<script type = 'text/javascript'>localStorage.getItem('x')</script>" ?> width = "80%" height = "600px" name = "frame_name"></iframe>
</body>
</html>

Это всё, до чего я пока додумался. Но сайт не открывается. Даже тестируемый гугл

@Raisin Zn · 29.06.2016, 17:56

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

@knuthamsun · 29.06.2016, 18:01 **[ТС]**

А как написать в одном файле, чтоб ещё и новый слой открывался? Я поэтому и хочу чтоб знающие люди код написали по своим соображениям

@Raisin Zn · 29.06.2016, 18:06

Пример:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.iframe {
    width: 100%;
    height: 95%;
}
 
.window {
    width: 80%;
    height: 80%;
    position: fixed;
    right: 10%;
    top: 10%;
    bottom: 10%;
    left: 10%;
}
 
.tool {
    width: 100%;
    height: 5%;
}

HTML5
1
<a href="http://danfa.org/" onClick="window(this.href); return false;">Link</a>

JavaScript
1
2
3
4
5
6
7
8
function window(url) {
    var block = '<div class="window"><div class="tool"><a href="' + url + '" target="_blank">Открыть сайт</a> | <a href="#" onClick="shut(); return false;">Закрыть</a></div><iframe class="iframe" src="' + url + '"></iframe></div>';
    $(block).appendTo('body');
};
 
function shut() {
    $('.window').hide();
};

В ссылке можно заменить Link на картинку.

Источник: {запрещено ссылаться на другие форумы}...

Добавлено через 2 минуты
Можно допилить, как вам угодно.

@knuthamsun · 29.06.2016, 18:19 **[ТС]**

Я правильно сделал?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<DOCTYPE html>
    <head>
        <script>
            function window(url) {
                var block = '<div class="window"><div class="tool"><a href="' + url + '" target="_blank">Открыть сайт</a> | <a href="#" onClick="shut(); return false;">Закрыть</a></div><iframe class="iframe" src="' + url + '"></iframe></div>';
                $(block).appendTo('body');
            };
 
            function shut() {
                $('.window').hide();
            };
        </script>
    </head>
    <body>
    <style>
        .iframe {
            width: 100%;
            height: 95%;
        }
 
        .window {
            width: 80%;
            height: 80%;
            position: fixed;
            right: 10%;
            top: 10%;
            bottom: 10%;
            left: 10%;
        }
 
        .tool {
            width: 100%;
            height: 5%;
        }
 
    </style>
    <a href="http://danfa.org/" onClick="window(this.href); return false;">Link</a>
    </body>
</html>

@Raisin Zn · 29.06.2016, 18:21

А библиотеку jQuery забыли подключить.

Добавлено через 45 секунд

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.iframe {
    width: 100%;
    height: 95%;
}
 
.window {
    width: 80%;
    height: 80%;
    position: fixed;
    right: 10%;
    top: 10%;
    bottom: 10%;
    left: 10%;
}
 
.tool {
    width: 100%;
    height: 5%;
} 
</style>
<body>
<a href="http://danfa.org/" onClick="window(this.href); return false;">Link</a> 
<a href="https://www.cyberforum.ru" onClick="window(this.href); return false;">Link</a>
 
<script type="text/javascript">
function window(url) {
    var block = '<div class="window"><div class="tool"><a href="' + url + '" target="_blank">Открыть сайт</a> | <a href="#" onClick="shut(); return false;">Закрыть</a></div><iframe class="iframe" src="' + url + '"></iframe></div>';
    $(block).appendTo('body');
};
 
function shut() {
    $('.window').hide();
};
</script>
</body>

Пробуйте.

@BANO · 29.06.2016, 18:23

Raisin Zn, window, document, while, true, for и тд, это НЕ изменяемые куски языка, ваш код невалиден в браузере

@knuthamsun · 29.06.2016, 18:23 **[ТС]**

Чёт переходит на сайт.. Обе ссылки (

@Raisin Zn · 29.06.2016, 18:27

BANO, я же написал, что это всего лишь пример:

Сообщение от Raisin Zn

Пример:

К тому же он работает.

Добавлено через 35 секунд

Сообщение от knuthamsun

Чёт переходит на сайт.. Обе ссылки (

Фиг знает, у меня работает.
Браузер Яндекс. Пробую не на сервере, на компьютере.

Добавлено через 1 минуту

Сообщение от BANO

window

Вы говорите о названии функции:

Сообщение от Raisin Zn

function window(url)

Верно понял?

@knuthamsun · 29.06.2016, 18:27 **[ТС]**

В Яндексе то же самое..Ок, всё-равно спасибо за ссылку, буду разбираться)

@Raisin Zn · 29.06.2016, 18:35

Если да, то надо так заменить:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.iframe {
    width: 100%;
    height: 95%;
}
 
.window {
    width: 80%;
    height: 80%;
    position: fixed;
    right: 10%;
    top: 10%;
    bottom: 10%;
    left: 10%;
}
 
.tool {
    width: 100%;
    height: 5%;
} 
</style>
<body>
<a href="http://danfa.org/" onClick="w(this.href); return false;">Link</a> 
<a href="https://www.cyberforum.ru" onClick="w(this.href); return false;">Link</a>
 
<script type="text/javascript">
function w(url) {
    var block = '<div class="window"><div class="tool"><a href="' + url + '" target="_blank">Открыть сайт</a> | <a href="#" onClick="shut(); return false;">Закрыть</a></div><iframe class="iframe" src="' + url + '"></iframe></div>';
    $(block).appendTo('body');
};
 
function shut() {
    $('.window').hide();
};
</script>

Добавлено через 6 минут
Ага, пробую на https://jsfiddle.net, там не работает...

@knuthamsun · 29.06.2016, 18:37 **[ТС]**

О! Работает)
Спасибо)
Сейчас буду анализировать код

@Raisin Zn · 29.06.2016, 18:40

Сообщение от knuthamsun

О! Работает)

А что сделали, чтобы заработало?
У меня на компьютере работает, на https://jsfiddle.net не хочет.

@knuthamsun · 29.06.2016, 19:09 **[ТС]**

CTRL+C & CTRL+V Т тот верхний код, чтоб заработало)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78

	Нажать на изображение и вывести сайт в новом окне в iframe 29.06.2016, 15:28. Показов 3020. Ответов 20 Метки нет (Все метки) Всем привет! Ребят, задолбался я перебирать туеву хучу вариантов.. Сам я почти новичок, так вот как сделать, чтоб при нажатии на картинку, брался её URL (не источник картинки, а "a href = site.ru" куда она ведёт при нажатии) и этот сайт site.ru открывался в новом окне в iframe? Спасибо. 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	29.06.2016, 17:01 [ТС]
	Скажем, пусть будет картинка, по нажатию на которую идёт переход на другой сайт. Нужно сделать переход, только сайт на другой странице отобразить в iframe. P.S. а сверху, над iframe, например, реклама, таймер или ещё что-то P.S.S. я хочу для развития понять суть этого дела 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	29.06.2016, 17:30
	knuthamsun, покажите html картинки с ссылкой для того, чтобы сделать вот такой вот дурацкий рекламный ход, вам нужно будет иметь страницу на вашем сайте, которая будет заменять url находящегося внутри фрейма на тот url, который скорее всего будет идти через get параметр или через якорёк 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	29.06.2016, 17:34 [ТС]
	А можно приблизительный набросок кода? Суть уловить. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	29.06.2016, 17:39
	knuthamsun, это я у вас прошу код, чтобы суть уловить 0

@Raisin Zn 101 / 100 / 51 Регистрация: 19.04.2011 Сообщений: 965
	29.06.2016, 17:56
	Не понятно зачем надо открывать сайт в ифрейме, если можно просто перейти на него. Но не проще сценарий написать в одном файле, что бы он открывал новый слой, где и будет ифрейм с сайтом? 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	29.06.2016, 18:01 [ТС]
	А как написать в одном файле, чтоб ещё и новый слой открывался? Я поэтому и хочу чтоб знающие люди код написали по своим соображениям 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	29.06.2016, 18:23
	Raisin Zn, window, document, while, true, for и тд, это НЕ изменяемые куски языка, ваш код невалиден в браузере 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	29.06.2016, 18:23 [ТС]
	Чёт переходит на сайт.. Обе ссылки ( 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	29.06.2016, 18:27 [ТС]
	В Яндексе то же самое..Ок, всё-равно спасибо за ссылку, буду разбираться) 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	29.06.2016, 18:37 [ТС]
	О! Работает) Спасибо) Сейчас буду анализировать код 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	29.06.2016, 19:09 [ТС]
	CTRL+C & CTRL+V Т тот верхний код, чтоб заработало) 0