0

Estoy probando la característica de convertir un sitio web en un Quick App con el web component y quiero que algunos links se abran en el navegador externo. Según la documentación se pueden agregar enlaces a un whitelist pero no funciona.

Este es el código

<template>
    <div class="doc-page">
        <!-- Replace the link to the HTML5 app -->
        <web class="web-page" src="{{loadUrl}}" trustedurl="{{list}}" onpagestart="onPageStart" onpagefinish="onPageFinish"
            onmessage="onMessage" ontitlereceive="onTitleReceive"
             onerror="onError" id="web" 
             supportzoom="{{supportZoom}}"
             wideviewport="{{wideViewport}}}"
             overviewmodeinload="{{overViewModeLoad}}"
             useragent="{{ua}}"
             allowthirdpartycookies="{{allowThirdPartyCookies}}"
             multiwindow="{{multiwindow}}"
             jumppolicy="browser"
             openinbrowserurl="{{browserurls}}">
        </web>
    </div>
</template>

<style>
    .doc-page {
        flex-direction: column;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
         width: 100%;
        height: 100%;
        position: fixed;
    }

    .web-page {
        width: 100%;
        height: 100%;
    }
</style>
<script>
    import router from "@system.router";
  
    export default {
        props: ['websrc'],
        data: {
            title: "",

            // TODO Replace the link to the H5 app
            loadUrl: "https://dummy-app.s3.us-east-2.amazonaws.com/index.html",

            // Attribute allowthirdpartycookies, indicates whether cookies can be delivered in cross-domain mode.
            // If you need login Google Account or Other Account, Please set TRUE.
            allowThirdPartyCookies: true,
            //Attribute supportzoom, indicates whether the H5 page can be zoomed with gestures.
            supportZoom:true,
            wideViewport:true,
            overViewModeLoad:true,
            multiwindow:true,
            ua:"default",
            // Here the whitelist settings, when the loading page has multiple addresses, such as the successful loading of the login address and the inconsistent entry address, it needs to set the whitelist to do so.
            list: ["https://dummy-app.s3.us-east-2.amazonaws.com/privacy-policy.html"],
            browserurls: ["https://dummy-app.s3.us-east-2.amazonaws.com/privacy-policy.html"]
            
        },


        onInit() {
           console.info('onInit: ');
        },

        onPageStart(e) {
            console.info('pagestart: ' + e.url)
        },

        // Each page switch triggers
        onPageFinish(e) {
            console.info('pagefinish: ' + e.url, e.canBack, e.canForward);
        },

        onTitleReceive(e) {
            this.title = e.title;
        },
        onError(e) {
            console.info('pageError : ' + e.errorMsg)
        },
        onMessage(e) {
            console.info('onmessage e = ' + e.message + ", url = " + e.url);
        },
        onShow: function () {
            console.info(" onshow");

        },
        onHide: function () {
            console.info("  onHide");
        },
        onBackPress() {
            console.log('onBackPress')
            this.$element('web').canBack({
                callback: function (e) {
                    if (e) {
                        console.log('web back')
                        this.$element('web').back()
                    } else {
                        console.log('router back')
                        router.back()
                    }
                }.bind(this)
            })
            return true
        },

    }
</script>

1 respuesta 1

0

Al parecer la solución no está dentro de la guia de desarrollo, sino en la sección de preguntas frecuentes.

Hay que modificar el minPlatformVersion en 1066 en el archivo manifest.json

"name": "H5Demo",
"versionName": "1.0.3",
"versionCode": 4,
"icon": "/Common/logo.png",
"minPlatformVersion": 1066,
...

En el web component hay que setear el jumpPolicy en Browser y el multiWindow en true

    <web class="web-page" src="{{loadUrl}}" trustedurl="{{list}}" onpagestart="onPageStart" onpagefinish="onPageFinish"
        onmessage="onMessage" ontitlereceive="onTitleReceive"
         onerror="onError" id="web" 
         supportzoom="{{supportZoom}}"
         wideviewport="{{wideViewport}}}"
         overviewmodeinload="{{overViewModeLoad}}"
         useragent="{{ua}}"
         allowthirdpartycookies="{{allowThirdPartyCookies}}"
         multiwindow="{{multiwindow}}"
         jumppolicy="browser"
         openinbrowserurl="{{browserurls}}">
    </web>

Y por último agregar al link que quieres abrir el atributo target="_blank"

<a href="https://dummy-app.s3.us-east-2.amazonaws.com/privacy-policy.html" target="_blank">Privacy Policy</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.