2013-04-30 64 views
-1

我想在下面的js中刪除圖像logo.png行,並用iframe代碼替換。如何將iframe添加到getElementById?

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輸出。

謝謝。

+0

只要找到圖像其id ='login_banner'並將其刪除。用你的iframe代碼替換它。然後,您可以簡單地刪除操作舊的login_banner圖像的JavaScript代碼。 – jahroy 2013-04-30 02:10:37

+0

請添加一些html代碼,尤其是您要添加iframe的元素。謝謝。 – kais 2013-04-30 02:13:46

回答

2

如果我理解正確你的問題,在普通的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); 
} 

如果你想要做的是要知道HTML是什麼添加iframe來你的頁面,那麼這將是這樣的:

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

我編輯了我原來的帖子。我認爲你輸入的內容是正確的。我只是想確定。謝謝。 – 2013-04-30 03:19:28

+0

根據您添加的內容,我在幾分鐘前回答了一個問題,因此該框架也將具有login_banner ID。 – jfriend00 2013-04-30 03:20:18

+0

@Brandon - 您可以將此代碼放在任何位置,以便在頁面加載後用iframe替換圖像。我無法告訴你iframe的外觀將取決於內容。試試看看。您可能還需要設置iframe的高度和寬度。 – jfriend00 2013-04-30 03:48:29