如何将图片加载到同一页面而不是新页面

How do I get the picture to load on the same page instead of on a new page

本文关键字：一页 新页面 加载      更新时间：2024-01-12

我有三个下拉菜单，它们根据所选内容生成结果。按下"显示图片"按钮时，会在新页面上打开图片。我希望它能加载到同一页上。

function f(){
    var gid=function(i){return document.getElementById(i);};
    var product_id=gid("one").value;
    var version_id=gid("two").value;
    var arch_id=gid("three").value;
    if(product_id==='default' || version_id ==='default' || arch_id === 'default'){return;}
    window.location.replace('images/' +product_id + '_' + version_id + '_' + arch_id + '.jpg');   
}
<select id="one">
    <option value="value-a1">string1</option>
    <option value="value-a2">string2</option>
    <option value="value-a3">string3</option>
</select>
<select id="two">
    <option value="value-b4">string4</option>
    <option value="value-b5">string5</option>
    <option value="value-b6">string6</option>
</select>
<select id="three">
    <option value="value-c6">string7</option>
    <option value="value-c7">string8</option>
    <option value="value-c8">string9</option>
</select>
<input onclick="Javascript:f();" value="Show picture" type="button"/>

创建一个空的<img></img>标记，并使用此JQuery函数更改其来源：

function f(){
    var gid=function(i){return document.getElementById(i);};
    var product_id=gid("one").value;
    var version_id=gid("two").value;
    var arch_id=gid("three").value;
    if(product_id==='default' || version_id ==='default' || arch_id === 'default'){
        return;
    }
    $("#idOfTheNewImageTag").prop('src', product_id + '_' + version_id + '_' + arch_id + '.jpg');   
}

尝试使用链接

window.open('images/' +product_id + '_' + version_id + '_' + arch_id + '.jpg','_self');

这样就可以了，@Zeratos的回答需要JQuery来完成，下面的代码不会。

function f(){
var gid=function(i){return document.getElementById(i);};
var product_id=gid("one").value;
var version_id=gid("two").value;
var arch_id=gid("three").value;
if(product_id==='default' || version_id ==='default' || arch_id === 'default'){
    return;
}
gid("idOfTheNewImageTag").src='images/'+product_id + '_' + version_id + '_' + arch_id + '.jpg';   
}

插入您的代码，我可以看到它将当前浏览器URL替换为您生成的URL（而不是打开另一个浏览器选项卡或窗口），因此浏览器（在我的情况下是chrome）会导航到您生成的网址（这正是位置.replace的目的）。

您的意思是要将图像加载到另一个标签/div/span/image中吗？

要加载新的div/image（使用jquery）：

$("<div>").appendTo("body").load(newUrl);

或

$("<img>").attr("src", newUrl).appendTo("body");

或

使用原始js:

var img = document.createElement("img");
img.setAttribute("src", newUrl);

（使用insertBefore等在dom中移动元素）

啊！

在html代码中添加新的div。JSFIDDLE 中的演示

<div id="img"> </div>

包括Jquery并使用此功能。

 function f(){
    var gid=function(i){return document.getElementById(i);};
    var product_id=gid("one").value;
    var version_id=gid("two").value;
    var arch_id=gid("three").value;
    if(product_id==='default' || version_id ==='default' || arch_id === 'default'){return;}       
     var img = $("<img />").attr('src', 'http://www.w3schools.com/images/w3css.gif')
    .load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#img").html(img);
        }
    });    
}
相关文章：