web-dev-qa-db-fra.com

modifier par programmation href à onclick = window.open

Est-ce que quelqu'un sait comment changer par programme le lien de:

<a href="some_url">click</a>

à:

<a onclick="window.open('some_url','_blank', 'location=no')">click</a>

afin que tous les liens créés dans l'éditeur visuel wordpress soient ouverts via inappbrowser dans une application Cordova.

ceci est le plus proche que je peux obtenir, mais ne fonctionne toujours pas, la variable '%link%' ne change pas pour l'URL du lien réel:

add_filter('the_content', 'changeToOnclick');
function changeToOnclick($content) {
    return preg_replace('/<a [^>]*>/', "<a onclick=\"window.open('%link%', '_blank', 'location=no')\">", $content);
}

toute aide serait appréciée :)

links
2
yanuar

L'analyse HTML avec des expressions régulières n'est pas idéale. Une meilleure alternative consiste à utiliser DOMDocument et DOMXpath;

Ce code utilise DOMDocument et DOMXpath pour analyser et modifier le code HTML sans s'appuyer sur des expressions régulières. L'attribut onclick est ajouté à chaque lien du contenu avec le code window.open() approprié à l'aide de l'URL extraite de la valeur de l'attribut href. L'attribut href est ensuite supprimé du lien.

add_filter( 'the_content', 'wpse_cordova_links', 10, 1 );
function wpse_cordova_links( $content ) {
    // Create an instance of DOMDocument.
    $dom = new \DOMDocument();

    // Suppress errors due to malformed HTML.
    // See http://stackoverflow.com/a/17559716/3059883
    $libxml_previous_state = libxml_use_internal_errors( true );

    // Populate $dom with $content, making sure to handle UTF-8, otherwise
    // problems will occur with UTF-8 characters.
    $dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) );

    // Restore previous state of libxml_use_internal_errors() now that we're done.
    // Again, see http://stackoverflow.com/a/17559716/3059883
    libxml_use_internal_errors( $libxml_previous_state );

    // Create an instance of DOMXpath.
    $xpath = new \DOMXpath( $dom );

    // Query all links within our content.
    $links = $xpath->query( '//a' );

    // Iterate over the $links.
    foreach ( $links as $link ) {
        if ( $link->hasAttributes() ) {
            // Get the value of the href attribute
            $link_href = $link->getAttribute( 'href' );

            // Create an onlick attribute and set the value
            $link_onclick = $dom->createAttribute( 'onclick' );
            $link_onclick->value = "window.open( '" . $link_href . "', '_blank', 'location=no' );";
            $link->appendChild( $link_onclick );

            // Remove the href attribute
            $link->removeAttribute( 'href' );
        }
    }

    // Save the updated HTML
    $content = $dom->saveHTML();    

    return $content;
}

Exemple HTML avant traitement 

<p><a href="http://example.com/">click</a></p>

<p>Lorem ipsum dolor sit amet, ecclesiam mittam est amet constanter approximavit te. Introivit gubernum defunctam vivum eum ego esse ait mea Christianis<br>
<a class="test-class test-other-class" href="http://example.com/1/">click me too</a> aedificatur ergo accipiet duxit ad te. Ascendi in modo invenit ubi diu requievit agi coepit. Apollonii appropinquat tation ulterius quod ait mea Christianis aedificatur ergo accipiet si mihi esse deprecor cum. Equidem deceptum in fuerat eum est in, quoque sed quod ait est in fuerat.</p>

<p><a data-test="55" href="http://example.com/2/">click me as well</a></p>

<p>Lorem ipsum dolor sit amet, ecclesiam mittam est amet constanter approximavit te. Introivit gubernum defunctam vivum eum ego esse ait mea Christianis aedificatur ergo accipiet duxit ad te. Ascendi in modo invenit ubi diu requievit agi coepit. Apollonii appropinquat tation ulterius quod ait mea Christianis aedificatur ergo accipiet si mihi esse deprecor cum. Equidem deceptum<br>
<a id="test-id" class="test-class" href="http://example.com/3/">clicky</a> in fuerat eum est in, quoque sed quod ait est in <a>This link has no href attribute</a> fuerat.</p>

Exemple HTML après traitement 

<p><a onclick="window.open( 'http://example.com/', '_blank', 'location=no' );">click</a></p>

<p>Lorem ipsum dolor sit amet, ecclesiam mittam est amet constanter approximavit te. Introivit gubernum defunctam vivum eum ego esse ait mea Christianis<br>
<a class="test-class test-other-class" onclick="window.open( 'http://example.com/1/', '_blank', 'location=no' );">click me too</a> aedificatur ergo accipiet duxit ad te. Ascendi in modo invenit ubi diu requievit agi coepit. Apollonii appropinquat tation ulterius quod ait mea Christianis aedificatur ergo accipiet si mihi esse deprecor cum. Equidem deceptum in fuerat eum est in, quoque sed quod ait est in fuerat.</p>

<p><a data-test="55" onclick="window.open( 'http://example.com/2/', '_blank', 'location=no' );">click me as well</a></p>

<p>Lorem ipsum dolor sit amet, ecclesiam mittam est amet constanter approximavit te. Introivit gubernum defunctam vivum eum ego esse ait mea Christianis aedificatur ergo accipiet duxit ad te. Ascendi in modo invenit ubi diu requievit agi coepit. Apollonii appropinquat tation ulterius quod ait mea Christianis aedificatur ergo accipiet si mihi esse deprecor cum. Equidem deceptum<br>
<a id="test-id" class="test-class" onclick="window.open( 'http://example.com/3/', '_blank', 'location=no' );">clicky</a> in fuerat eum est in, quoque sed quod ait est in <a>This link has no href attribute</a> fuerat.</p>
3
Dave Romsey

Il y a plusieurs plugins qui le feront automatiquement. L'un est "Ouvrir les liens externes dans une nouvelle fenêtre" (trouvé ici https://wordpress.org/plugins/open-external-links-in-a-new-window/ ). Vous pouvez probablement en trouver d'autres si vous recherchez des "liens externes" dans les plugins.

Je l'utilise sur plusieurs sites, fonctionne bien.

Si vous voulez lancer le vôtre, regardez simplement le code qu'ils utilisent, car tous les plugins sont (généralement) open source. Mais pourquoi réinventer la roue?

0
Rick Hellewell