Question

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

＆＃13;

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');   
}

＆＃13;

<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"/>

＆＃13;

Answer 1

创建一个空<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');   
}

Answer 2

拉进你的代码，我可以看到它用你生成的网址替换了当前的浏览器网址（没有打开另一个浏览器选项卡或窗口） - 所以浏览器（在我的情况下为chrome）导航到你的URL生成（这正是 location.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中移动元素）

HTH！

Answer 3

尝试使用链接

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

Answer 4

这样做，@ Zeratops的回答将需要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';   
}

Answer 5

在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);
        }
    });    
}

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

5 个答案: