[UWP]如何禁用Webview滚动并设置其高度以适合整个内容 [英] [UWP]How to disable Webview scrolling and set it's height to fit the entire content
问题描述
我正在使用webview来显示和编辑我的UWP应用程序中的内容。我想禁用Webview控件中的滚动并使其适应高度以适应它的整个内容。然后它应该尊重它的父控件的
scrollviewer的滚动。我在OneDrive上传了一个示例应用程序： https://1drv.ms/u/s!AhChIerZubKRjQKBH5nA0KGTtPYP
在示例应用程序中，您可以看到一旦到达在滚动查看器结束时，webview将开始在其内部滚动。相反，我想要做的是，继续滚动（父滚动浏览器）到webview的结尾。
In the sample app, you can see that once you reach at the end of the scrollviewer, the webview will start scrolling within itself. Instead what I would like to do is, keep scrolling (the parent scrollviewr) to the end of the webview.
编辑：这是代码：
Here's the code:
MainPage.xaml：
MainPage.xaml:
<ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto" Height="200" Width="400">
<StackPanel>
<Button Content="Navigate web page 1"
Margin="0,20,0,0"
HorizontalAlignment="Center"
Click="Button_Click"/>
<Button Content="Navigate web page 2"
Margin="0,20,0,0"
HorizontalAlignment="Center"
Click="Button_Click_1"/>
<Button Content="Navigate web page 3"
Margin="0,20,0,0"
HorizontalAlignment="Center"
Click="Button_Click_2"/>
<Button Content="Navigate web page 4"
Margin="0,20,0,0"
HorizontalAlignment="Center"
Click="Button_Click_3"/>
<WebView Name="WebView" Width="400" MinHeight="200"></WebView>
</StackPanel>
</ScrollViewer>
MainPage.xaml.cs：
MainPage.xaml.cs:
public sealed partial class MainPage : Page
{
private const string EditableParameter = "~editable~";
private const string SetBodyEditableScript = @"
try
{
document.body.contentEditable = '" + EditableParameter + @"';
}
catch(e)
{
}";
private const string SetTextFromClipBoardFunctionName = "setTextFromClipBoard";
private const string SetHtmlTextFromClipboardFunction =
"function " + SetTextFromClipBoardFunctionName + @"(htmlFromClipboard)
{
if (window.getSelection)
{
var range;
var sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement('div');
el.innerHTML = htmlFromClipboard + '<span></span>';
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
range.collapse(false);
window.external.notify('RefreshAndReportHtml');
}
else if (typeof document.selection != 'undefined' && document.selection.type != 'Control') {
var html = (node.nodeType == 1) ? node.outerHTML : node.data;
html += '<span></span>';
var textRange = document.selection.createRange();
textRange.pasteHTML(html);
textRange.collapse(false);
window.external.notify('RefreshAndReportHtml');
}
}
};";
private const string GetHtmlFunctionName = "getHtml";
private const string GetHtmlFunction =
"function " + GetHtmlFunctionName + @"(skipParam)
{
return document.documentElement.innerHTML;
};";
public MainPage()
{
this.InitializeComponent();
MakeWebviewEditable();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
//(Window.Current.Content as Frame).Navigate(typeof(WebviewPage), "http://tsn.ua");
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
//(Window.Current.Content as Frame).Navigate(typeof(WebviewPage), "http://buzzfeed.com");
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
//(Window.Current.Content as Frame).Navigate(typeof(WebviewPage), "http://microsoft.com");
}
private void Button_Click_3(object sender, RoutedEventArgs e)
{
//(Window.Current.Content as Frame).Navigate(typeof(WebviewPage), "http://cnn.com");
}
private const string EventNotificationFormat = @"window.external.notify('{0}');";
private async void MakeWebviewEditable()
{
WebView.NavigateToString("I do not know how that about righting wrongs can be, said the bachelor, for from 707" +
"straight you have made me crooked, leaving me with a broken leg that will never see itself straight again all the days of its life and the injury you have redressed in my case" +
"has been to leave me injured in such a way that I shall remain injured for ever and the height of misadventure it was to fall in with you who go in search of adventures." +
"I do not know how that about righting wrongs can be, said the bachelor, for from 707" +
"straight you have made me crooked, leaving me with a broken leg that will never see itself straight again all the days of its life and the injury you have redressed in my case" +
"has been to leave me injured in such a way that I shall remain injured for ever and the height of misadventure it was to fall in with you who go in search of adventures.");
//await InjectJavaScriptAsync(SetBodyEditableScript.Replace(EditableParameter, "true"));
await InjectJavaScriptAsync("document.designMode='on'");
await InjectJavaScriptAsync(GetHtmlFunction);
}
private async Task InjectJavaScriptAsync(string jscript)
{
await WebView.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
{
try
{
// Only execute JS if a document is fully loaded. This should eliminate JS exception related to UNKNOWN name errors.
//if (IsHtmlLoaded)
string result = await WebView.InvokeScriptAsync("eval", new string[] { jscript });
}
catch (Exception ex)
{
}
});
}
}
推荐答案
Heyo Ashishks，
Heyo Ashishks,
要使webview达到内容的大小，你必须使用JavaScript来检测渲染DOM的高度。这里有一个很好的建议： http：//stackoverflow.com/questions/12727041/detecting-webview-height-via-scrolling-in-xaml
您可以使用计算出的值直接设置WebView的高度。
To make the webview the size of the content, you'll have to use JavaScript to detect the height of the rendered DOM. There's a good suggestion here : http://stackoverflow.com/questions/12727041/detecting-webview-height-via-scrolling-in-xaml
You can use the calculated value to directly set the WebView's Height.
然后，为防止其滚动，请将WebView的ScrollViewer.VerticalScrollMode修改为"已禁用"。
$
希望有所帮助！
$
~Kyler
Then, to prevent its scrolling, modify the WebView's ScrollViewer.VerticalScrollMode to "Disabled".
Hope that helps!
~Kyler
这篇关于[UWP]如何禁用Webview滚动并设置其高度以适合整个内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
