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

0

Поэтому я хотел бы знать, можно ли перенаправить и открыть вкладку пользователей на страницу исходного URL-адреса, которую использует тег iframe, когда они нажимают в любом месте iframe. Поэтому вместо того, чтобы они могли просматривать iframe, я бы хотел, чтобы он автоматически открывал новую вкладку с URL-адресом src.

Вот код, с которым я работаю в настоящее время.

<!-- CSS -->

<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">        

    <style>
        body {
    color: purple;
    background-color: #663300 }
    </style>

    <script>
function virtualSubmit(form){
    var text = form.searchtext.value;
    var targets = document.getElementsByTagName('iframe'),
        items = targets.length;

    for(var i = 0; i<items; i++){
        var target = targets[i],
            url = target.getAttribute('data-url');
        target.src = url + text;
    }

    return false;
}
    </script>

    <body>

        <!--The Search bar as well-->
<form onsubmit="return virtualSubmit(this)";>
    <input name="searchtext" type="text" />
    <input type="image" src="Searchbutton.png" alt="Search Button" height="20" width="20"/>
</form>

    <iframe src="http://www.google.com/custom"
            data-url="http://www.google.com/custom?q="
            width="250"
            height="600" onmouseover="width=400" onmouseout="width=250"></iframe>

    <iframe src="http://en.wikipedia.org/wiki"
            data-url="http://en.wikipedia.org/wiki/"
            width="250"
            height="600" onmouseover="width=400" onmouseout="width=250"></iframe>


    <iframe src="http://m.dictionary.com/definition"
            data-url="http://m.dictionary.com/definition/"
            width="250"
            height="600" onmouseover="width=400" onmouseout="width=250"></iframe>
Теги:
iframe

1 ответ

1
Лучший ответ

Предполагая, что iframe является отдельным доменом, вы не можете напрямую изменять iframe. Браузер предотвратит это из-за защиты одного и того же происхождения.

Но, в зависимости от вашего точного макета, вы иногда можете поместить прозрачный div поверх вершины iframe (используя абсолютное позиционирование и z-index), настроить обработчики событий для этого div и перехватить любые события щелчка, которые пользователь намеревался для iframe и если ваше желание перенаправить страницу браузера в другое место, вы можете сделать это при одном из этих кликов.

$(document).ready(function() {
    $("iframe").each(function() {
        var iframe = $(this);
        var pos = iframe.position();
        var div = document.createElement("div");
        var s = div.style;
        s.position = "absolute";
        s.left = pos.left + "px";
        s.top = pos.top + "px";
        s.height = iframe.height() + "px";
        s.width = iframe.width() + "px";
        iframe.parent().append(div);
        $(div).data("src", iframe.attr("src")).click(function() {
            window.location = $(this).data("src");
        });
    });
});

Рабочая демонстрация: http://jsfiddle.net/jfriend00/EB2kh/

Я удалил динамический размер из iframes, потому что это усложняет проблему с целью показать вам концепцию, но если вы действительно хотите, чтобы она работала с ней, вы могли перемещать/изменять размер div в любое время, когда iframes были перемещены/изменены.

Поделиться
  • 0
    Могу ли я привести пример идеи о том, как будет выглядеть div? или, по крайней мере, насколько сложно было бы сопоставить src url div с URL внутри iframe, так как я использую javascript для загрузки содержимого текстовой панели в поисковый запрос?
  • 0
    @Ibounes - код и демо добавлены в мой ответ.
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню