今天就做“词条预览”吧。这个我参考了百度百科的“词条预览”功能,大概原理是通过提交一个
target属性是"_blank"的form,这样会在新窗口中打开目标页,并把数据提交过去。根据这个原理写了如下js代码:
//
Preview
var
oPreview, oLemma, oDetail, oTag, oRefer;
![](https://i-blog.csdnimg.cn/blog_migrate/4c720c075b2dcdf0df83e479379ac278.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6d86037aed75966cb38b8e31a9d04993.png)
function
ShowPreview()
{
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
if(!Check(false)) return false;
![](https://i-blog.csdnimg.cn/blog_migrate/05496672fd419340c7d5ca92f3905365.png)
if(!oPreview)
{
oPreview = document.createElement("form");
oPreview.action = "../index/Preview.aspx";
oPreview.method = "post";
oPreview.target = "_blank";
document.body.appendChild(oPreview);
}
oLemma = SetInput(oLemma, "lemma", document.getElementById('<%= hfLemma.ClientID %>').value)
oDetail = SetInput(oDetail, "detail", document.getElementById('<%= tbDetail.ClientID %>').value)
oTag = SetInput(oTag, "tag", document.getElementById('<%= tbTag.ClientID %>').value)
oRefer = SetInput(oRefer, "refer", document.getElementById('<%= tbRefer.ClientID %>').value)
oPreview.submit();
}
![](https://i-blog.csdnimg.cn/blog_migrate/4c720c075b2dcdf0df83e479379ac278.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6d86037aed75966cb38b8e31a9d04993.png)
function
SetInput(oInput, sName, sValue)
{
![](https://i-blog.csdnimg.cn/blog_migrate/05496672fd419340c7d5ca92f3905365.png)
if(!oInput)
{
oInput = document.createElement("input");
oInput.name = sName;
oInput.type = "hidden";
oPreview.appendChild(oInput);
}
oInput.value = sValue;
return oInput;
}
这样就可以在预览页中获取数据,并处理后显示。最后把这个功能放在添加和编辑页就行了。这样预览功能就做好了。
![](https://i-blog.csdnimg.cn/blog_migrate/4c720c075b2dcdf0df83e479379ac278.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4c720c075b2dcdf0df83e479379ac278.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4c720c075b2dcdf0df83e479379ac278.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6d86037aed75966cb38b8e31a9d04993.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4135e36fb751975998ae7df0cff0cc81.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/05496672fd419340c7d5ca92f3905365.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c51c0c45950d411fc8cf2b72d6363c35.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1f52b673eb9378d96310fdd78604d328.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4bdba4b289ca684e8d00407a4326ed58.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4c720c075b2dcdf0df83e479379ac278.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6d86037aed75966cb38b8e31a9d04993.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4135e36fb751975998ae7df0cff0cc81.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/05496672fd419340c7d5ca92f3905365.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c51c0c45950d411fc8cf2b72d6363c35.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1f52b673eb9378d96310fdd78604d328.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cad07e2759267b7cf3ee57305ae244bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4bdba4b289ca684e8d00407a4326ed58.png)
这样就可以在预览页中获取数据,并处理后显示。最后把这个功能放在添加和编辑页就行了。这样预览功能就做好了。