最近在做北京现代项目的时候,遇到一个需求将韩国那边写好的网页嵌套到WPF程序中显示。
开始的时候使用的是第三方的浏览器控件:awesomium,在本地测试,显示没有问题。但是拿到客户现场,只显示半屏。修改各种高度,还是会出现问题,用远程桌面打开,显示正常,百思不得解。
换控件使用微软自带的浏览器控件WebBrowser,升级IE还是会出现显示半屏问题。
查看网页源码,页面显示高度是动态获取的,以下是网页中的JS源码
var wHeight, header1, header2;
wHeight = $(window).height();
header1 = $("div.board_header").outerHeight();
header2 = $("div.table_header").outerHeight();
$("div.table_scroll").css("max-height", (wHeight - header1 - header2 - 1 - 40) + "px");
max-height 获取的值是动态获取的,所以会导致以上的问题。
解决问题思路:页面加载完成,通过注入JS脚本,修改max-height,来显示完整网页。
源码如下:
/// <summary>
/// 浏览器加载完成事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void ibbWeb_LoadCompleted(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
try
{
dom = (mshtml.HTMLDocument)ibbWeb.Document; //定义HTML
dom.documentElement.style.overflow = "hidden"; //隐藏浏览器的滚动条
dom.body.setAttribute("scroll", "no"); //禁用浏览器的滚动条
dom.parentWindow.execScript(@"window.onload = function(){ $('div.table_scroll').css('max-height', '910px'); setTimeout('window.location.href=window.location.href',"+refreshPageInterval+") }"); //向页面注入javascript语句
}
catch (Exception ex)
{
LogInfo.saveLog("加载浏览器控件异常:" + ex);
return;
}
}