1

我有以下情况：

用户悬停在菜单项上，悬停时从外部站点调用 Javascript 脚本。此脚本将内容写入特定的 div。

然后我需要做的是获取这个 divs html 并将其存储在 cookie 中。cookie 在 3 分钟后过期。

用户第二次在 3 分钟内悬停（cookie 尚未过期），而不是从外部站点调用 Javascript，我需要简单地加载以前由外部站点的 Javascript 写入 div 的 HTML。这是为了限制对外部站点的调用量，因为每次调用其服务器都会收费。

因为从外部站点的 Javascript 写入内容并将写入的 html 值分配给 cookie 是在客户端同时发生的，所以在尝试将 html 存储到 cookie 时总是没有任何价值。

不知何故，我需要等到页面完全加载，以便外部脚本使用 HTML 内容填充指定的 div，然后将该 div 的 html 内容添加到 cookie。

这就是我卡住的地方。也许有更简单、更聪明的方法来解决这个问题？我愿意接受建议和想法！

这是我有评论的代码：

$(document).ready(function() {

    // create script element
    var my_script = document.createElement( 'script' );
        my_script.type = 'text/javascript';
        my_script.src = "http://www.external-site.com/this_script_writes_content_to_div.js";

    // User hovers on a menu item, limit the call by using jQuery .one
    $( "#my_menu_item" ).one( "mouseenter", function() {

        // If cookie exists, don't write Javascript (my_script) but use stored value in cookie
        if (document.cookie.indexOf("my_cookie") != -1) {

            // This is where I'm having trouble, since the cookie's value is empty, see below
            $("#div_with_content_from_js").html( getCookie("my_cookie") );

            // Test results
            console.log('Cookie exists');
            console.log(getCookie("my_cookie"));
        }

        // If cookie does not exist, write the script to a div
        // the script will then populate another div with content, the div name is 'div_with_content_from_js'
        // then create cookie and store the other divs content into the cookie
        else {
            document.getElementById( "div_for_external_script" ).appendChild( my_script );
            create_my_cookie();

            // test results
            console.log( 'Cookie does not exist' );
        }
    });

});


// Creates a cookie that expires after 180 seconds (3 minutes)
function create_my_cookie() {
    var date = new Date();
    date.setTime( date.getTime() + ( 180*1000 ) );
    var expires = "; expires="+date.toGMTString();

    // this value returns empty because the html value of div_with_content_from_js was just written (see else part above)
    // this is where I'm stuck, how do I get the value of div_with_content_from_js and store it in the cookie
    var coffee_cookie_value = $("#div_with_content_from_js").html();

    document.cookie = 'my_cookie' + "=" + coffee_cookie_value + expires + "; path=/";

    // test results
    console.log( coffee_cookie_value );
    console.log( getCookie( "my_cookie" ) );
}


// This function returns a specific cookie, used for testing
function getCookie( name ) {
    var re = new RegExp(name + "=([^;]+)");
    var value = re.exec( document.cookie );

    return ( value != null) ? unescape(value[1] ) : null;
}
4

3 回答 3

4
  1. 该cookie仅用于倒计时3分钟
  2. 在页面上添加一个隐藏的 div
  3. 在来自外部网站的隐藏 div 存储内容中
  4. 悬停时：如果未过期 3 分钟，只需复制隐藏 div 的内容
于 2014-12-18T00:49:12.680 回答
1

jQuery .always() 函数在这里有用吗？在 jQuery 中，您的“always”函数将在前面的代码解析后执行。

$( "div_for_external_script" ).appendChild( my_script ).always(function() { create_my_cookie(); };
于 2014-12-24T17:24:41.953 回答
0

为什么不使用MutationObserver？然后你可以在需要的突变发生时设置 cookie。示例小提琴setTimeout 仅用于演示目的。所以你的代码应该是这样的：

// If cookie does not exist, write the script to a div
// the script will then populate another div with content, the div name is 'div_with_content_from_js'
// then create cookie and store the other divs content into the cookie
else {
    var target = document.querySelector('#div_that_will_be_populated');
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if(mutation.type == 'childList') {
                create_my_cookie();
            }
        });    
 });
 var config = { attributes: true, childList: true, characterData: true };
 observer.observe(target, config);
 document.getElementById( "div_for_external_script" ).appendChild( my_script );

 // test results
 console.log( 'Cookie does not exist' );
}
于 2014-12-24T18:47:56.857 回答