Question

最近我遇到了一个我试图理解的场景。我已经有了解决方法，我的工作已经完成，但我仍然无法理解为什么这个场景真的发生了。问题是严格基于编程的，所以我希望它可以在stackoverflow上使用。

我在页面上有一个Div：

<DIV id="tos3" >
<FONT size=2 face=Arial color=#009a00><B>How to request Business Applications Software </B></FONT>
<BR/><BR/>
<FONT size=2 face=Arial color=#000000>
<select id="segment" onchange="getSecondDropdown(this);"><option value="Segment">Select Segment</option>
  <option value="E&P">E&P</option>
  <option value="R&M">R&M</option>
  <option value="IST">IST</option>
  <option value="Functions">Functions</option>
  <option value="Other">Other</option>
</select>
<select id="DivisionDP" disabled="disabled"  onchange="getDetails();"><option value="Division">Select Division/SPU/Region</option>
</select>
<DIV id="infoDetails"></DIV>
</FONT>
</DIV>

相关Javascript：

function getSecondDropdown(e)
{
// get the values in seconnd drop down
}
function getDetails()
{
// display details based on selection
}

它在页面上工作正常。比来了一个请求在Popup上显示这个div。我们的母版页中有一个弹出代码，通过我们的网站使用它来显示数据：

 <div id="testDiv" style="border-left:2px solid #99cc00;border-right:2px solid #99cc00;border-top:2px solid #4c4c4c;border-bottom:2px solid #4c4c4c;width:500px;display:none;background-color: #eeeeee;z-index:1000;padding:10px 10px 10px 10px">
<div align="right" style="height:25 px;">
<a style="cursor:pointer" onClick="closePouUp()">close</a>
</div>
<div id="contentDiv" style="overflow:auto;"> testDiv content</div>
 </div>

<div id="greyout" style="background-color: black; display:none;z-index:400;filter: alpha(opacity=70);opacity: 0.7;width:100%;   height:100%;">
</div>

function ShowHideProduct(sValue,flag)
{


var customCopyrightContainer;
customCopyrightContainer = document.getElementById(sValue);
divRef = document.getElementById('testDiv');
innerDiv=document.getElementById('contentDiv');
if(flag==1)
{
innerDiv.style.height = "300px";
}
innerDiv.innerHTML= customCopyrightContainer.innerHTML;
 // Get the screen dimensions...
 var screenSize = getViewportSize();
 var screenWidth = screenSize.width;
 var screenHeight = screenSize.height;


 // Get the element dimensions...
 var elementSize = getElementSize(divRef);
 var elementWidth = elementSize.width;
 var elementHeight = elementSize.height;

// Calculate the centering positions...
 var xPos = (screenWidth - elementWidth) / 2;
 var yPos = (screenHeight - elementHeight) / 2;
 yPos=document.body.scrollTop/2+yPos;
var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );


//make page greyout
greyOutDiv=document.getElementById('greyout');
greyOutDiv.style.position = 'absolute';
greyOutDiv.style.left = '0px';
greyOutDiv.style.top = '0px';
greyOutDiv.style.width = '1500px';
greyOutDiv.style.height = height + 'px';
greyOutDiv.style.display = 'block';



 // Position the element...
 divRef.style.position = 'absolute';
 divRef.style.left = xPos + 'px';
 divRef.style.top = yPos + 'px';
 divRef.style.display = 'block';



if(flag==1)
{
divRef.style.height = "300px";
}
return;
            }

function closePouUp()
{
divRef = document.getElementById('testDiv');
greyOutDiv=document.getElementById('greyout');
divRef.style.display = 'none';
greyOutDiv.style.display = 'none';
}

我使用相同的代码和功能无法正常工作。从输出中我觉得javasript innerHTML正在创建一个临时对象。我觉得这是因为第一个下拉列表没有使用getElementByID方法但是当我在方法中传递它的参考时它起作用了。

我没有得到任何适当的解释。

我通过将原始div显示为弹出窗口来解决我的问题。所以现在我只想了解究竟发生了什么。

了解Javascript InnerHTML属性

0 个答案: