Создание содержимого загрузки ссылки в iframe на новой странице

Question

Мне нужно создать ссылку, которая открывает страницу, но устанавливает новую цель в iframe на этой странице, это возможно?

Так, например.

«Link1» должен ссылаться на «index.html», на этой странице уже есть iframe, но мне нужно «hamsters.html» для загрузки в iframe, когда загружается «index.html».

Там также будет

«Link2» и «LINK3» это будет ссылка на «index.html» однако «LINK2» загрузит страницу «rabbits.html'in в IFRAME, и» link3 'загрузит страницу' gerbils.html 'в iframe. Iframe все еще находится в 'index.html'.

Надеюсь, что это ясно, мой оригинальный код ссылок, 'link1' в примере расположен ниже.

Благодаря

<td onclick="window.location = 'index.html';" style='cursor: hand; cursor: pointer;' background="images/static.gif" id="td1" width="25%" bgcolor="#FFFFFF"> 

Answer 1

Попробуйте это:

<td onclick="(function(){window.location='index.html';})()" style='cursor: hand; cursor: pointer;' background="images/static.gif" id="td1" width="25%" bgcolor="#FFFFFF"> 

Но Мартейн правильно, вы не должны быть встраивание любой Javascript или CSS в теги, если возможно

Answer 2

Позвольте мне начать с этого :
Не встроенный стиль! Также;
Не встроенный Javascript!

Затем, более релевантная информация, вы можете сделать что-то в качестве кода ниже. Просто добавьте атрибут данных к любому элементу, который вы хотите (если вы не используете якоря, вы должны адепт код в этом случае), и он будет работать:

<div data-link="index.html">Click me for index</div> 
<label data-link="index2.html">Click me for index2<label> 

Javascript:

$(document).ready(function(){ 
    // Use jQuery to select all element with the 'data-link' attribute 
    $('[data-link]').on('click', function(e){ // add a click eventlistener to it 
     e.preventDefault(); // this is optional, prevent what it normally would do 
     $('#iframe')[0].src = $(this).data('link'); // set the iframe to the value of the attribute 
    }); 
}); 

---

На совершенно другая нота, это не путь :) Использование PHP и несколько полезных ссылок:

<a href="index.php?page=gerbils">Gerbils</a> 
<a href="index.php?page=hamsters">hamsters</a> 

и сделать переключатель index.php страницы. Есть много простых примеров, которые могут показать вам, как это сделать. Это 2014 год, не используйте iframes, если у вас нет веской причины.
Это позволит вам один день переключиться на приятные URLs:

<a href="/gerbils">Gerbils</a> 
<a href="/hamsters">hamsters</a> 

Answer 3

Если я вас правильно понял, вы хотите перенаправить на другую страницу, где находится IFrame. Поскольку ни один из других ответов не разрешает это, вы можете отправить цель iframe в качестве запроса.

Вот пример:

На исходной странице

HTML

<td class="link" data-iframe="hamsters.html"></td> 
<td class="link" data-iframe="rabbits.html"></td> 

JS

$(function() { 
    $('.link').click(function() { 
     window.location.href = "index.html?iframe=" + $(this).data('iframe');; 
    }); 
}); 

При нажатии на <td> с классом link на вашей исходной странице, вы будете перенаправлены на index.html?iframe= + все, что содержится в data-iframe.

Теперь вам просто нужно обработать входящий запрос на index.html, как показано ниже.

HTML

<iframe id="iframe"></iframe> 

JS

$(function() { 
    if (typeof getUrlVars()["iframe"] != 'undefined') { 
     $("#iframe").attr("src", getUrlVars()["iframe"]); 
    } 
}); 

function getUrlVars() { 
    var vars = [], 
     hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for (var i = 0; i < hashes.length; i++) { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
} 

Заемные getUrlVars из here.

Answer 4

Magnus Engdal является правильным, но вы можете сделать URL-получение кода намного проще. Используйте хэш вместо строки запроса, так что вы измените данные-IFRAME на:

<td class="link" data-iframe="index.html#hamsters.html"></td> 
<td class="link" data-iframe="index.html#rabbits.html"></td> 

А на новой странице вы делаете:

$("#iframe").attr("src", window.location.hash); 

Done. Сохранение большого количества кода (и полосы пропускания и скорости).

BTW не забудьте добавить этот код на первой странице:

$(function() { 
    $('.link').click(function() { 
     window.location.href = $(this).data('iframe');; 
    }); 
});