的JavaScript彈出窗口替換原有的HTML源代碼

我已經添加下面的Java腳本代碼來創建一個彈出窗口：的JavaScript彈出窗口替換原有的HTML源代碼

document.write('<center>'); 

    document.write('<div id="productComapreBox" style="border:0px solid #0066FF ; padding:5px; font-size:150%; text-align:center; display:none; width:820px; height:600px;">'); 
     document.write('<input type="image" src="images/close.png" width="30" height="30" alt="X" onClick="'+eval(Popup.hide("productComapreBox"))+'" style="cursor:pointer; float:right; z-index:20;">'); 
     document.write('<div style="z-index:20;">'); 

      document.write('<iframe width="800px" height="600px" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" style="background-color:#FFFFFF;" src="<?php echo $domainName; ?>productComaprePop.php?productComapreIds='+productId+'"></iframe>'); 

     document.write('</div>'); 
    document.write('</div>'); 

document.write('</center>');

它打開彈出窗口，我想，但它替代原有的HTML源。如何防止這一點。

請幫

感謝

來源

2013-06-27 A S

您可能想了解一下'appenChild（）'方法。請注意，應儘可能避免使用JavaScript生成HTML，與內聯樣式完全相同，並且僅當您無法執行其他操作時才應使用iFrame。 –

你在哪裏可以找到這個'document.write（）'函數？創建內容到現有頁面時不應使用它，而是用於創建全新文檔。 – Teemu

'document.write'將取代內容。不要使用它。改爲使用動態DOM操作。 [HTMLElement.appendChild]（https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild） – marekful

而不是使用document.write的，您可以使用此代碼 -

HTML的

<div id="container" style="display: none;"> 
<center> 
<div id="productComapreBox" style="border:0px solid #0066FF ; padding:5px; font-size:150%; text-align:center; display:none; width:820px; height:600px;"> 
<input type="image" src="images/close.png" width="30" height="30" alt="X" onClick="'+eval(Popup.hide("productComapreBox"))+'" style="cursor:pointer; float:right; z-index:20;"> 
<div style="z-index:20;"> 
<iframe id="frame" width="800px" height="600px" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" style="background-color:#FFFFFF;></iframe> 
</div> 
</div> 
</center> 
</div>

Javascript成爲

function unhide(){ 
var fullurl = "<?php echo $domainName; ?>productComaprePop.php?productComapreIds='" + productId + "'"; 
document.getElementById('frame').scr=fullurl; 
document.getElementById('container').style.display="block"; 
}

因此，只需撥打unhide()即可顯示此內容，而不會干擾其他代碼。

來源

2013-06-27 11:36:17 Sid

問題是，iframe url是基於選擇的產品進行動態比較。請參閱 src =「<？php echo $ domainName;？> productComaprePop.php？productComapreIds ='+ productId +'」 –

您可以將完整url的值賦予php中的變量，如下所示 - '$ fullurl = $ domainName .'productComaprePop.php productComapreIds =」 +的productId +;'。那麼就使用這個 - 'src =「<？php echo fullurl;？>」'我在我的回答中也更新了這個。 – Sid

但問題是，完整的url中的productId不知道什麼時候在PHP。當用戶選擇用於比較產品的複選框時，我只能通過JavaScript獲取該信息。這是你可以在我的代碼已經有javascript'+ productId +'「 –

你必須追加你的新元素，而不是覆蓋你現在擁有的元素。

例如。

var location = document.getElementById('#somElement'); 
var fragment = document.createDocumentFragment(); 
var div = document.createElement('DIV'); 
var secondDiv = document.createElement('DIV'); 

div.appendChild(secondDiv); 
fragment.appendChild(div); 
location.appendChild(fragment);

來源

2013-06-27 11:45:02 Johan

的JavaScript彈出窗口替換原有的HTML源代碼

回答

相關問題