如何在移動設備上禁用UWP WebView中的內容？

我有一個改變div塊的html頁面。如何在移動設備上禁用UWP WebView中的內容？

當此區塊中出現新文字時，字體大小開始減少，，以便整個文字適合WebView。

我希望字體大小保持不變，但在WebView中出現一個滾動條。

問題僅在移動設備上重現。

HTML頁面的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Problem with Page</title> 
    </head> 
    <body> 
     <script> 
     AddText = function (v) { 
      var div = document.getElementById('TextContainer'); 

      div.innerHTML = div.innerHTML + v; 
     }; 
     </script> 
     <div style="font-size: 250%;" id="TextContainer"></div> 
     <input type="submit" value="button" onClick="AddText(this.value)"> 
    </body> 
</html>

的XAML代碼頁：

<Page 
    x:Class="EvidentCalculator.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:EvidentCalculator" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <WebView Margin="3,0,3,0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="150" x:Name="WebContainer"/> 
     <Button Grid.Row="1" Content="Invoke script!" Click="BtnClick"/> 
    </Grid> 
</Page>

後面的代碼：

/// <summary> 
    /// An empty page that can be used on its own or navigated to within a Frame. 
    /// </summary> 
    public sealed partial class MainPage : Page 
    { 
     public MainPage() 
     { 
      InitializeComponent(); 

      Loaded+=OnLoad; 
     } 

     private async void OnLoad(object sender, RoutedEventArgs e) 
     { 
      //TODO Need some code to load html into WebView!!! 
     } 

     private async void BtnClick(object sender, RoutedEventArgs e) 
     { 
      await WebContainer.InvokeScriptAsync("AddText", new[] { "Some test text" }); 
     } 
    }

來源

2017-06-12 Boris Salimov

該方法可以解決的是ViewBox。 – lindexi

我試圖添加div塊的innerText。但我無法重現您的問題。你可以請分享關於你的HTML頁面的更多細節。 –

@ NicoZhu-MSFT我添加了一些代碼來解釋我的問題。 –

我已經測試你的代碼並再現您的問題。問題是您的div塊在添加「按鈕」文本時被拉伸，並且沒有自動換行。爲了使div塊可以正常工作，可以使用word-break:break-all創建樣式。

<body> 
    <script> 
     AddText = function (v) { 
      var div = document.getElementById('TextContainer'); 
      div.innerHTML = div.innerHTML + v; 
     }; 
    </script> 
    <div style="font-size: 250%; word-break:break-all" id="TextContainer"></div> 
    <input type="submit" value="button" onClick="AddText(this.value)" /> 
    <button id="btnClick" type="button" value="Some test" onclick="AddText(this.value)">Click Me </button> 
</body>

如果你需要在一排帶滾動條的WebView中的文本，並保持文本字體大小，您可以添加overflow-y:scroll的風格。

<div style="font-size: 250%; overflow-y:scroll" id="TextContainer" ></div>

來源

2017-06-14 02:35:04

不幸的是，這不是我需要的解決方案。我需要WebView中滾動條的一行文本。（沒有換行）我忘了添加代碼來更準確地再現我的問題，對不起。需要在Xaml頁面的WebView中添加VerticalAlignment =「Top」Height =「150」。 –

你可以通過在div樣式中加入overflow-y：scroll來實現。 –

您是否嘗試過上述解決方法？如果您還有其他問題，請隨時在此發佈。 –

如何在移動設備上禁用UWP WebView中的內容？

回答

相關問題