javascript - 链接同一页面上的另一个 html (javascript)

Question

我想在同一页面上在此 css 弹出框架顶部链接另一个 html(nytimes.html)。我怎么做？

$('.portfolio-thumbnail').click(function(e) {
console.log(this.id); //this is how we know what to load into the frame
$('#popup-frame').fadeIn();

switch(this.id) {
case "nytimes":
    //do something for nytimes
    $('#popup-frame').css('background', "rgba(0, 255,0, .5)" );


    break;
case "eloquence":
    $('#popup-frame').css('background', "rgba(255, 82, 145, .5)" );
    break;
default:
    break;
}
});

Answer 1

我个人建议您在 CSS 弹出窗口中嵌入一个 iFrame，其中包含您想要显示的网站。

case "nytimes":
    //do something for nytimes
    $('#popup-frame').css('background', "rgba(0, 255,0, .5)" );

    $('#popup-frame').html('<iframe src="nytimes.html" name="popupFrame" scrolling="auto" frameborder="no" align="center" height = "100%" width = "100%"> </iframe>')
    break;

然后，您可以设置 iFrame 的样式，使其看起来像您想要的样子，包括使用 css zoom如果您想减慢页面的“预览”速度，iframe 上的属性可以使内容看起来更小。