在 Wordpress 中确认离开外部链接

Posted 2023-03-05

【中文标题】在 Wordpress 中确认离开外部链接

【英文标题】：Confirm Leave on External Links in Wordpress

【发布时间】：2014-04-18 09:29:38

【问题描述】：

情况如下：

这是一个银行网站，因此当用户点击外部链接（可能是 Facebook 页面或合作伙伴网站）时，需要有一个框显示“您即将离开此页面，没有此内容由...等管理。”。

然后，用户应该能够单击“确认”以在新窗口中打开外部链接，或单击“取消”以返回网站并显示“您已选择不离开地点”。

此站点位于 Wordpress 中，因此我正在寻找一种无需为每个链接添加自定义 javascript 的简单方法来处理此问题。

他们实际上已经在他们现有的网站上运行它：http://clearmountainbank.com/ 我可以通过在标题中添加一个 confirm_entry 脚本并为每个链接添加自定义 Javascript 来使其在新站点上运行，但我无法获得指向的链接在新窗口中打开。

这种方式也很耗时，因为我必须手动编辑每个外部链接。是否有任何简单的方法可以识别外部链接并在整个站点中添加此功能，如果没有，我该怎么做才能使其在新窗口中打开？

这是我正在使用的代码：

    <script type="text/javascript">
        <!--
            function confirm_entry(varible_value)
            
            input_box=confirm("Link Disclaimer:  Bank Name  provides links to web pages which are not part of the Bank Name website or clearmountainbank.com or online.bankname.com domains. These sites are not under Bank Name control, and Clear Mountain Bank is not responsible for the information or links you may find there. Bank Name is providing these links only as a convenience. The presence of these links on any Bank Name website is not intended to imply Bank Name endorsement of that site, but to provide a convenient link to relevant sites which are managed by other organizations, companies, or individuals.");
            if (input_box==true)

             
            window.location.href=varible_value; 
            

            else
            
            // Output when Cancel is clicked
            alert ("You have opted not to leave Bank's website.");
            

            
        -->
    </script>

【参考方案1】：

这是您可以做到的一种方法(See JSFiddle)：

$("a").on("click", function() 
    if($(this).attr("href").indexOf("http://") == 0) 
        return confirm("Super long message");
    
);

这仅适用于 http:// 而不适用于 https://，它也不会检查绝对链接是否指向您当前的域，但它会为您提供如何处理它的想法。

【讨论】：

非常感谢您的回复。不幸的是，Javascript 并不是我的强项。我已经尝试将其添加到我的标题中，但在点击链接时我没有收到任何类型的消息（我确定我做错了什么）：asayopreview.com/cmb

没问题，好吧1)你有script type-"text.."而不是<script type ="text"...和2)你需要包装所有的JS在$(document).ready(function() <code goes here> );

啊，好吧。修复了我的错误，但仍然没有看到任何事情发生。抱歉，添麻烦了。非常感谢您的帮助。

不，您的操作方式确实有效，但是如果您想找到任何没有的链接，它会警告您以 http://www.asayopreview.com/cmb 开头的任何链接那个地址然后你可以indexOf(...) == -1 代替。

谢谢。再次，我很感激。

【参考方案2】：

我无法让confirm() 工作。但是，多亏了以下问答，我做了一个替代方案：

Open external link in new window and track outbound click event JQuery confirm dialog WordPress, jQuery UI CSS Files? Are there hosted jQuery UI themes anywhere? Why jQuery UI 1.10 remove jquery dialog zIndex option?

您可以在主题的functions.php 中应用代码，但最好使用make a plugin for that。

add_action( 'wp_enqueue_scripts', 'enqueue_scripts_so_22382151' );
add_action( 'wp_header', 'print_header_so_22382151' );
add_action( 'wp_footer', 'print_footer_so_22382151' );

/**
 * Enqueue jQuery Dialog and its dependencies
 * Enqueue jQuery UI theme from Google CDN
 */
function enqueue_scripts_so_22382151() 
    wp_enqueue_script( 'jquery-ui-dialog', false, array('jquery-ui','jquery') );
    wp_enqueue_style( 'jquery-ui-cdn', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dot-luv/jquery-ui.min.css' );
    


/**
 * Print Dialog custom style
 */
function print_header_so_22382151()  
    ?>
    <style>
        /* A class used by the jQuery UI CSS framework for their dialogs. */
        .ui-front 
            z-index:1000000 !important; /* The default is 100. !important overrides the default. */
        
        .ui-widget-overlay 
            opacity: .8;
        
    </style>
    <?php


/**
 * Print Dialog script
 */
function print_footer_so_22382151()  
    $current_domain = $_SERVER['SERVER_NAME'];
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) 
          $('a[href^="http://"],a[href^="https://"]')
            .not('[href*="<?php echo $current_domain; ?>"]')
            .click(function(e) 
                e.preventDefault();
                var url = this.href;
                $('<div></div>').appendTo('body')
                    .html('<div><h6>Link Disclaimer:  [...].</h6></div>')
                    .dialog(
                        modal: true, title: 'message', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: 
                            Yes: function () 
                                window.open(url);
                                $(this).dialog("close");
                            ,
                            No: function () 
                                $(this).dialog("close");
                            
                        ,
                        close: function (event, ui) 
                            $(this).remove();
                        
                    );
            )
        );
    </script>
    <?php