Question

我想删除以下js中的图片logo.png行，并使用iframe代码替换。

currentRoomId = document.getElementById('roomID').value;

if ( document.getElementById('room_' + currentRoomId + '_bg') ) {
    document.getElementById('login_banner').src = document.getElementById('room_' + currentRoomId + '_bg').value;
}
else if ( document.getElementById('login_banner').src != "http://somedomain.com/header/logo.png" ) {
    document.getElementById('login_banner').src = "http://somedomain.com/header/logo.png";
}

if ( document.getElementById('room_' + currentRoomId + '_bg_link') && document.getElementById('room_' + currentRoomId + '_bg_link').value != 'FREE' ) {
    document.getElementById('login_banner_link').href = document.getElementById('room_' + currentRoomId + '_bg_link').value;
}
else if ( document.getElementById('login_banner_link') ) {

我想切换它，这是在html：

中

<img src="http://somedomain.com/logo.png" id="login_banner" /></a>

到此：

<iframe class="animation" src="http://somedomain.com/header/index.html" id="login_banner"></iframe>

因此后端可以识别它是应该显示默认横幅还是客户端横幅。

我需要编辑js代码以反映最终的html输出。

谢谢。

Answer 1

如果我正确理解你的问题，在普通的javascript中，您可以使用此代码删除图片并在其位置插入一个框架：

// create frame element
var frame = document.createElement("iframe");
frame.className = "animation";
frame.id = "login_banner";
frame.src = "http://somedomain.com/header/index.html";

// insert frame before img
var img = document.getElementById('login_banner');
img.parentNode.insertBefore(frame, img);

// remove img
img.parentNode.removeChild(img);

如果您尝试做一些不同的事情，请澄清您的问题。

我不确定您要在何处插入此代码，但如果您希望在您发布的代码的最后else if中找到它，那么它将如下所示：

currentRoomId = document.getElementById('roomID').value;

if ( document.getElementById('room_' + currentRoomId + '_bg') ) {
    document.getElementById('login_banner').src = document.getElementById('room_' + currentRoomId + '_bg').value;
}
else if ( document.getElementById('login_banner').src != "http://somedomain.com/header/logo.png" ) {
    document.getElementById('login_banner').src = "http://somedomain.com/header/logo.png";
}

if ( document.getElementById('room_' + currentRoomId + '_bg_link') && document.getElementById('room_' + currentRoomId + '_bg_link').value != 'FREE' ) {
    document.getElementById('login_banner_link').href = document.getElementById('room_' + currentRoomId + '_bg_link').value;
}
else if ( document.getElementById('login_banner_link') ) {
    // create frame element
    var frame = document.createElement("iframe");
    frame.className = "animation";
    frame.id = "login_banner";
    frame.src = "http://somedomain.com/header/index.html";

    // insert frame before img
    var img = document.getElementById('login_banner');
    img.parentNode.insertBefore(frame, img);

    // remove img
    img.parentNode.removeChild(img);
}

如果你想要做的就是知道用于向页面添加iframe的HTML是什么，那就是：

<iframe class="animation" src="http://somedomain.com/header/index.html" id="login_banner" height="400" width="400"></iframe>

如何向getElementById添加iframe？

1 个答案: