时间戳

首页 > 解决方案 > Xamarin 表单 WebView - 加载的页面不会触发拖放事件

android - Xamarin 表单 WebView - 加载的页面不会触发拖放事件

问题描述

我在 Xamarin 表单页面上有一个 WebView。我正在尝试响应该页面上 javascript 中的拖放事件。以下是示例中使用的页面的静态 HTML：

<html>
<body>
<h2 id='hello'>Hello</h2>
<button onclick='changeToRed()'>Press Me</button>
<p>Drag area</p>
    <div class='container' id='List'>
        <p class='draggable' draggable='true' ondragstart='changeToGreen()'>One</p>
        <p id='two' class='draggable' draggable='true'><button>Two</button></p>  
    </div>   
<script>
(function () {

  changeHeadingBg('yellow');
    
  function dragstart_handler(ev) {
    changeToGreen();
  }

  window.addEventListener('DOMContentLoaded', () => {
    const element = document.getElementById('two');
    element.addEventListener('dragstart', dragstart_handler);
  });
})();

    function changeHeadingBg(color){
            document.getElementById('hello').style.background = color;
    }
    function changeToRed(){
        document.getElementById('hello').style.background = 'red';
    }
    function changeToGreen(){
        document.getElementById('hello').style.background = 'green';
    }

</script>
</body>
</html>

如果您将其保存为静态 html 页面并在浏览器中打开它，则两个文本元素都会通过更改元素背景颜色来响应 dragstart 事件（您可以通过单击按钮将其重置）。如果我将相同的 html 加载到 webview 中并尝试与之交互，则不会触发拖动事件。我尝试了各种设置事件的方法，包括页面上当前的两种方法，但这些事件永远不会触发。其他事件，例如按钮的 onclick 处理程序，似乎可以正常触发。谁能指出我正确的方向？

这是我的页面 xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test.MainPage">

    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <WebView x:Name="webView" WidthRequest="1000" HeightRequest="1000"  />
    </StackLayout>

</ContentPage>

这是它背后的代码 - 为嵌入 HTML 的讨厌方式道歉，但这似乎是创建一个自包含示例的最简单方法：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Test {
    public partial class MainPage : ContentPage {
        public MainPage() {
            InitializeComponent();

            var html = new HtmlWebViewSource {
                Html = GetHtml()
            };
            webView.Source = html;
        }

        private string GetHtml() {
            return @"
<html>
<body>
<h2 id='hello'>Hello</h2>
<button onclick='changeToRed()'>Press Me</button>

    <div class='container' id='List'>
        <p class='draggable' draggable='true' ondragstart='changeToGreen()'>Zero</p>
        <p id='two' class='draggable' draggable='true'>One</p>  
    </div>   

<script>
(function () {

    changeHeadingBg('yellow');

      function dragstart_handler(ev) {
    changeToGreen();
  }

  window.addEventListener('DOMContentLoaded', () => {
    const element = document.getElementById('two');
    element.addEventListener('dragstart', dragstart_handler);
  });

})();

    function changeHeadingBg(color){
            document.getElementById('hello').style.background = color;
    }
    function changeToRed(){
        document.getElementById('hello').style.background = 'red';
    }
    function changeToGreen(){
        document.getElementById('hello').style.background = 'green';
    }

</script>
</body>
</html>
";
        }

    }



}

标签： androideventsxamarin.formswebview

解决方案

推荐阅读