在新頁面的iframe中創建鏈接加載內容

我需要創建一個打開頁面的鏈接，但在該頁面的iframe中設置了新的目標，這可能嗎？在新頁面的iframe中創建鏈接加載內容

舉例來說。

'Link1'必須鏈接到'index.html'這個頁面已經有一個iframe，但是當'index.html'加載時，我需要'hamsters.html'加載iframe。

也將有一個

「鏈路2」和「鏈接3」這些也將鏈接到是index.html，但「鏈接2」將加載頁面「rabbits.html'in的iframe和」 LINK3 '將在iframe中加載'gerbils.html'頁面。 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">

來源

2014-02-12 user3302088

試試這個：

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

但馬亭是正確的，你不應該被內聯任何JavaScript或CSS在你的標籤，如果可能的

來源

2014-02-12 14:50:09

讓我開始與此：
不要內聯風格！也;
不要內聯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年，除非你有很好的理由，否則不要使用iframe。
這將允許你有一天切換到不錯的網址：

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

來源

2014-02-12 14:50:09 Martijn

你好我沒有看到如何上面的代碼與我的OnClick鏈接適合在上面，你可以請解釋一下？謝謝！ – user3302088

我已經刪除了內聯樣式的需要。這個javascript需要被包含，然後所有具有'data-link =「」'屬性的東西都會觸發iframe改變。我認爲我的答案很好地解釋了它，如果沒有，只需編碼並使其工作，然後改變它，直到你得到你需要的東西 – Martijn

如果我理解正確的話，你要重定向到的iframe位於另一頁。由於其他答案都沒有解決這個問題，所以可以將iframe目標作爲查詢字符串發送。

下面是一個例子：

在原始網頁

HTML

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

$(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>

$(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; 
}

從here借getUrlVars。

來源

2014-02-12 15:05:02

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);

完成。節省了很多代碼（以及帶寬和速度）。

BTW不要忘了這個代碼添加到第一網頁：

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

來源

2014-02-12 15:10:53 MarijnS95

Upvote對我的答案進行了非常好的升級:) –

@MagnusEngdal我想寫什麼你說的是答案，但隨後你就彈了出來，所以我決定把它作爲一個闡述。我仍然想知道爲什麼提問者接受了上面的答案，這並不是提問者想要的，也就是在加載index.html頁面之後設置了iframe的正確src ...奇怪。 – MarijnS95

我想這對他/她是有效的:)我從你的答案中學到了一些新東西，這就是我所要做的。乾杯! –

在新頁面的iframe中創建鏈接加載內容

回答

相關問題