根據不同的按鈕點擊打開不同的iframe

我試圖通過將iframe src分配給一個變量來打開不同的iframe窗口，當頁面最初加載時應該只顯示兩個按鈕，當我點擊按鈕時，一個iframe應該得到負載取決於哪個按鈕被按下時，我試圖做這樣的事情創建按鈕和創建內部框架，但它不工作根據不同的按鈕點擊打開不同的iframe

<button id="b1">Button 1</button> 
<button id="b2">Button 2</button> 
<iframe scrolling="no" src="whatnext"> 
</iframe> 
<script> 
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2'); 
var x = "Hello!"; 
function showX() { 
    var whatnext; 
    if b1.onclick==true 
     whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;" 
     elseif b2.onclick=true 
     whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 555px; margin-left: -116px; margin-top: -25px; width: 330px;" 
} 
</script> 
and another piece of trial is 
<button id="b1">Button 1</button> 
<button id="b2">Button 2</button> 
<iframe scrolling="no" src="x" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;"> 
</iframe> 
<script> 
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2'); 
var x ; 
function showX() { 
    src="https:http://stackoverflow.com"; 
} 
b1.onclick = function() { 
    x = "http://stackoverflow.com; 
    showX(); 
}; 
b2.onclick = function() { 
    x = "www.sitepoint.com"; 
    showX(); 
}; 
</script>

來源

2014-10-08 user1597336

你只需要改變點擊的iframe src屬性。我將src添加到usind數據屬性的按鈕中。這裏是例子http://jsfiddle.net/8wLm42ns/2/ 的HTML

<button class="loadiframe" id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button> 
<button class="loadiframe" id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button> 

<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">

jQuery的

$('.loadiframe').on('click', function(){ 
    var src = $(this).data('src'), 
     width = $(this).data('width'), 
     height = $(this).data('height'); 
    $('#frame').css({ 
     width: width, 
     height: height 
    }).attr('src', src); 
});

對於JavaScript的解決方案試試這個http://jsfiddle.net/8wLm42ns/3/

的HTML

<div class="loadiframe"> 
    <button id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button> 
    <button id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button> 
</div> 
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">

使用Javascript - 加我n頭部分

function iframeChange() { 
    var buttons = document.querySelector(".loadiframe"), 
     iframe = document.getElementById('frame'); 

    buttons.addEventListener("click", function (e) { 
     iframe.src = e.target.dataset.src; 
     iframe.width = e.target.dataset.width; 
     iframe.height = e.target.dataset.height; 
    }); 
} 
window.onload = iframeChange;

來源

2014-10-08 09:09:08

感謝很大的幫助兄弟........我用這個很多努力，從相當長 – user1597336 2014-10-09 13:48:19

你好博揚，解決的辦法是偉大的，但還是有一點這個腳本沒有提供的是，爲不同的按鈕點擊製作不同的iframe結構，每個按鈕加載不同的iframe，但iframe的大小也必須與按鈕不同，例如。對於第一個按鈕單擊ifram應加載寬度= 500和高度= 400，但對於下一個按鈕單擊它應該是widht = 650和高度= 350 – user1597336 2014-10-11 10:09:33

您是否使用jQuery解決方案或JavaScript？ – 2014-10-13 09:22:57

試試這個解決方案，點擊一個按鈕，你就可以在特定的iframe上加載網頁，不需要jquery。

JSBIN這裏 http://jsbin.com/gebelatomiya/1/

<!doctype html> 
<html> 
<head> 
<script> 
function loadFrame (elm){ 
    var frame1 = document.getElementById('frame1'); 
    frame1.src = elm.dataset.src; 
} 
</script> 
</head> 
<body> 
    <button id="b1" data-src="http://www.w3schools.com" onClick="loadFrame(this)">Button 1</button> 
    <button id="b2" data-src="http://www.sony.com" onClick="loadFrame(this)">Button 2</button> 
    <iframe id="frame1" scrolling="no"></iframe> 
</body> 
</html>

來源

2014-10-08 09:13:31 GibboK

非常感謝gibbok這兩個代碼工作，我要去嘗試兩個並看到頁面加載，以較快的速度加載我將使用它，但感謝讓社區知道做同樣的事情的新方法 – user1597336 2014-10-09 13:50:08

@ user1597336很高興爲您效勞！ – GibboK 2014-10-09 13:58:53

根據不同的按鈕點擊打開不同的iframe

回答

相關問題