2013-08-24 58 views
0

所以我一直在尋找這個幾個星期,而且什麼都沒有提出!從一個頁面到下一個頁面的html傳輸信息

我在我的家庭音樂商店的網站上工作,並被要求在網站上添加一個「鏈接」頁面。我的目標是讓我們的供應商類別(即小提琴,吉他,鋼琴等)位於頁面左側,當選擇類別時,鏈接會顯示在右側。我擁有的那部分。這裏棘手的部分是:當點擊某個供應商的鏈接(例如Fender,G & L,Yahmaha)而不是將它們直接帶到網站時,我希望它將所有內容都帶到同一頁面,但嵌入在該頁面中是網站。

我已經做了大量的研究,並沒有提出任何建議。我可以爲每個供應商創建一個新頁面,並將其嵌入到每個單獨的頁面中,但這對於大量供應商來說非常耗時。

就是這樣的可能嗎?我一直在玩嵌入自己,並讓它失望。它只是歸結爲他們點擊了哪個鏈接,然後加載該特定頁面。

如果有任何更多的信息可能需要幫助或指引我正確的方向請讓我知道!與任何可能有用的代碼一樣!

我在這方面的所有研究都已經死了。

編輯:我想我的最終目標是它會看起來像這樣:http://answers.yahoo.com/,以便供應商的網站是開放的底部,但我們的商店的橫幅和鏈接仍然在頂部。 Out網站可以在這裏找到:http://www.brassbellmusic.com/default.aspx

+0

你試過了什麼代碼?聽起來像JavaScript可能會對你有所幫助... – Pogrindis

+0

看看這裏:http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/ – Pogrindis

+0

我不知道它是什麼我當我點擊鏈接時,我正在看。到目前爲止,我還沒有嘗試過任何代碼,因爲我一直無法找到任何接近我想要做的事情。 – Nick

回答

0

我創建了一個JSFiddle來演示這個功能使用jQuery。

我們通過品牌鏈接在ul對列表進行迭代:

$('#brandListing a') 

捕獲click事件上的每個:

.click(function(ev){ 

的jQuery將一個事件對象的匿名函數(ev)。點擊鏈接後,我們首先必須阻止鏈接後面的默認操作。然後,我們更新了iframe的與被點擊的在href的值src屬性(以下簡稱「嵌入式網頁」):

ev.preventDefault(); 
$('#embeddedBrandWebsite').attr('src', ev.target.href); 

你需要jQuery庫添加到您的頁面中使用我的代碼示例,但可以在沒有它的情況下複製功能。

EDIT

上面的示例是用於單頁的實施,其中,鏈接和嵌入是在同一頁上。爲了實現請求的「信息傳輸」,我建議將目標href作爲GET參數傳遞(brassbellmusic.com/brandEmbed.aspx?path=http%3A//www.gibson.com/)。在單個「嵌入」頁面上,然後您可以在服務器端提取此設置以設置iframe的src或使用javascript。使用JavaScript,您可以使用:

function getURLParameter(name) { 
    return decodeURI(
     (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] 
    ); 
} 

Source

再經過你的文件已經準備好,使用getURLParameter('path')設置的iframe src

+0

忍無可忍,因爲我一直在學習HTML,並將在幾周內將學院作爲CS專業。你提到可以在沒有jQuery的情況下複製它?我寧願不必安裝外部事物來幫助運行公司網站。其次你提到通過目標作爲'GET',但與JavaScript顯示?我會去這裏只是HTML?最後,在JSFiddle上,Gibson鏈接不起作用,但是Yamaha鏈接沒有問題。 – Nick

+0

當然,沒問題。您的網站已經使用jQuery,因此不會有額外的/外部庫。雖然可以重構使用原始JavaScript,但我建議利用已安裝的jQuery庫提供的快捷方式。 要利用GET參數設置iframe src而不使用JavaScript,您需要使用服務器端語言。或者,您需要爲每個品牌提供一個單獨的頁面。 不幸的是,Gibson的網站通過設置爲SAMEORIGIN的X-Frame-Options頭來防止從另一個域中嵌入。你將無法iframe他們的網站。 –

相關問題