📜  如何检测浏览器是否支持 HTML 5?

📅  最后修改于: 2021-11-10 04:33:02             🧑  作者: Mango

HTML 5 是最新的 HTML 标准,其中包括许多新的更改和功能。可以使用三种方法检测 HTML 5 支持:

方法 1:检查地理定位支持:地理定位 API 是在 HTML5 中添加的。它用于识别用户的位置。可以通过检查导航器对象中是否存在地理定位属性来检测此 API 的存在。这是通过使用 navigator.geolocation 来完成的,它返回 Geolocation 对象。如果该对象存在,则表示浏览器支持 HTML5。

例子:



  

    
        How to detect HTML 5 is supported
        or not in the browser ?
    

  

    

        GeeksforGeeks     

                    How to detect HTML5 support         in the browser ?                 

        Geolocation features is added in HTML5.         Checking the Geolocation supports.     

           

        Click on the button to check         for Geolocation support     

           

        Gelocation is supported:               

                          

输出:

  • 点击按钮前:
  • 点击按钮后:

方法二:检查canvas元素: canvas元素用于渲染图形或位图元素。这是 HTML5 中添加的新功能。
canvas 元素有一个getContext()方法,用于返回 canvas 元素的绘图上下文。如果不支持上下文标识符,则返回空值。此属性可用于检查是否支持画布元素。
使用 document.createElement() 方法创建一个新的画布元素。 getContext 方法通过在创建的输入对象上访问它来检查。使用 if 语句检查此表达式的结果。如果结果为真,则表示浏览器支持 HTML5。

例子:



      

    
        How to detect HTML 5 is supported
        or not in the browser ?
    

  

    

        GeeksforGeeks     

                    How to detect that HTML5 is          not supported by JavaScript?                 

        The Canvas features added in HTML5. Checking         for canvas support in HTML5.     

           

        Click on the button to check         for Canvas support     

           

        Canvas is supported:               

                          

输出:

  • 点击按钮前:
  • 点击按钮后:

方法 3:检查文本输入类型: HTML5 引入了新的输入类型,可用于输入不同形式的数据并进行验证。 HTML5 之前的 input 元素不支持这些新类型,使用它们会自动恢复为默认的“文本”类型。这可用于检查浏览器是否支持 HTML5。
使用 document.createElement() 方法创建一个新的输入元素。然后在创建的元素上使用 setAttribute 方法将输入类型设置为任何较新的输入类型。使用 if 语句检查此元素的类型以查看它是否与默认的“文本”值匹配。如果该值没有恢复为默认设置,则表示浏览器支持 HTML5。

例子:



  

    
        How to detect HTML 5 is supported
        or not in the browser ?
    

  

    

        GeeksforGeeks     

                    How to detect HTML5 support         in the browser ?                 

        New input types are one of the         features added in HTML5.
        Checking for thse new input types         means that HTML5 is supported.     

           

        Click on the button to check if         the new input types are supported     

           

        New input types supported:               

                          

输出:

  • 点击按钮前:
  • 点击按钮后: