如何在jQuery中像在Lightbox中一樣點擊鏈接時在動態生成的iFrame中加載頁面？

我有聯繫例如列表：如何在jQuery中像在Lightbox中一樣點擊鏈接時在動態生成的iFrame中加載頁面？

<ul> 
<li><a href="http://google.com">Link1</a></li> 
<li><a href="http://example.com">Link2</a></li> 
<li><a href="http://example.com/sdf">Link3</a></li> 
</ul>

當點擊一個鏈接時，應在屏幕加載頁面類似燈箱的中間產生的iFrame。

如何用jQuery做到這一點？

來源

2010-06-09 Aakash Chakravarthy

$(document).ready(function(){ 
$('a').bind('click', function(e){ 
    $('<iframe/>', { 
     src: $(this).attr('href'), 
     class: 'myiframe', 
     css: { 
      position: 'absolute', 
      width: '200px', 
      height: '200px', 
      top:  window.innerHeight/2 + 300, 
      left:  window.innerWidth/2 + 300 
     }   
    }).appendTo(document.body); 

    return(false); 
}); 

$(document.body).bind('keydown', function(e){ 
    if(e.which === 27) 
    $('.myiframe').remove(); 
}); 
});

我不好計算頂部/左座標那裏，你可能要替換成一個CSS類反正。創建時使用class: "classname"。

參考文獻：.bind()，。 attr()，.appendTo()，jQuery Core

來源

2010-06-09 10:13:24 jAndy

你可以做這樣的事情：

// we only want to use a single iframe: 
var $iframe = $("<iframe>").css({ 
    width: '100%', 
    height: '10em' 
    // we can set more css properties to make it positioned where we want, etc... 
}); 
$("a").click(function() { 
    // stick it at the end of the <body> tag, and set its src property 
    $iframe.appendTo('body').attr('src',this.href); 
    return false; 
});

當然比一個演示其他任何東西，你會希望有一個更具體的選擇比a這將找到的每一個環節，像.myLinks a並添加class='mylinks'到<ul>可能是最好的選擇。您還可以使用更多選項來使用css屬性/類來設置的樣式。

Demo on jsfiddle

來源

2010-06-09 10:13:20 gnarf

嘿謝謝你，jsfiddle真的很好。謝謝你的代碼和介紹jsfiddle – 2010-06-09 12:47:02

@Aakash Chakravarthy - 沒問題 - 同樣，你可以通過點擊帖子評分下面的複選框來標記答案爲「接受」。 – gnarf 2010-06-09 12:48:26

如何在jQuery中像在Lightbox中一樣點擊鏈接時在動態生成的iFrame中加載頁面？

回答

相關問題