Не удается прочитать свойство '0' из неопределенного - Get PublicationDate - PullRequest
0 голосов
/ 27 октября 2018

Я хотел бы получить дату публикации из URL, я могу получить ее с помощью следующего кода: window.dataLayer [0] ['publishingdate'], но когда пришло время заставить его работать локально, консоль дает мне следующая ошибка «Не удается прочитать свойство« 0 »из неопределенного». У меня есть следующий код, может кто-нибудь, пожалуйста, помогите мне? Спасибо!

"использовать строгое";

var takashyx = takashyx || {};

takashyx.toast = (function () {

/**
 * The main Toast object
 * @param {Object} options See Toast.prototype.DEFAULT_SETTINGS for more info
 */
function Toast(text, options) {
    if(getToastStage() != null) {
        // If there is already a Toast being shown, hide it
        Toast.prototype.destroy();
    }
    var _options = options || {};
    _options = Toast.prototype.mergeOptions(Toast.prototype.DEFAULT_SETTINGS, _options);

    Toast.prototype.show(text, _options);

    _options = null;
};


/**
 * The toastStage. This is the HTML element in which the toast resides
 * Getter and setter methods are available privately
 * @type {Element}
 */
var _toastStage = null;
function getToastStage() {
    return _toastStage;
};
function setToastStage(toastStage) {
    _toastStage = toastStage;
};


/**
 * The Toast animation speed; how long the Toast takes to move to and from the screen
 * @type {Number}
 */
Toast.prototype.TOAST_ANIMATION_SPEED = 400;

// Toast classes
Toast.prototype.CLASS_TOAST_GONE = "takashyx_toast_gone";
Toast.prototype.CLASS_TOAST_VISIBLE = "takashyx_toast_visible";
Toast.prototype.CLASS_TOAST_ANIMATED = "takashyx_toast_animated";


/**
 * The default Toast settings
 * @type {Object}
 */
Toast.prototype.DEFAULT_SETTINGS = {
    style: {
        main: {
            "background": "rgba(0, 0, 0, .85)",
            "box-shadow": "0 0 10px rgba(0, 0, 0, .8)",

            "border-radius": "3px",

            "z-index": "99999",

            "color": "#01ff00",

            "padding": "10px 15px",
            "max-width": "40%",
            "word-break": "keep-all",
            "margin": "0 auto",
            "text-align": "center",

            "position": "fixed",
            "left": "0",
            "right": "0"
        }
    },
    settings: {
        duration: 4000
    }
};


/**
 * Specifies whether or not the inline style in the <head> exists. It only needs to be added once to a page
 * @type {Boolean}
 */
Toast.prototype.styleExists = false;


/**
 * The Timeout object for animations.
 * This should be shared among the Toasts, because timeouts may be cancelled e.g. on explicit call of hide()
 * @type {Object}
 */
Toast.prototype.timeout = null;


/**
 * Merge the DEFAULT_SETTINGS with the user defined options if specified
 * @param  {Object} options The user defined options
 */
Toast.prototype.mergeOptions = function(initialOptions, customOptions) {
    var merged = customOptions;
    for(var prop in initialOptions) {
        if(merged.hasOwnProperty(prop)) {
            if(initialOptions[prop] != null && initialOptions[prop].constructor == Object) {
                merged[prop] = Toast.prototype.mergeOptions(initialOptions[prop], merged[prop]);
            }
        } else {
            merged[prop] = initialOptions[prop];
        }
    }
    return merged;
};


/**
 * Add the inline stylesheet to the <head>
 * These inline styles are needed for animation purposes.
 */
Toast.prototype.initializeStyles = function() {
    if(Toast.prototype.styleExists) return;

    var style = document.createElement("style");

    style.insertAdjacentHTML("beforeend",
        Toast.prototype.generateInlineStylesheetRules(this.CLASS_TOAST_GONE, {
            "opacity": "0",
            "top": "10%"
        }) +
        Toast.prototype.generateInlineStylesheetRules(this.CLASS_TOAST_VISIBLE, {
            "opacity": "1",
            "top": "10%"
        }) +
        Toast.prototype.generateInlineStylesheetRules(this.CLASS_TOAST_ANIMATED, {
            "transition": "opacity " + this.TOAST_ANIMATION_SPEED + "ms, bottom " + this.TOAST_ANIMATION_SPEED + "ms"
        })
    );

    document.head.appendChild(style);
    style = null;

    // Notify that the stylesheet exists to avoid creating more
    Toast.prototype.styleExists = true;
};


/**
 * Generate the Toast with the specified text.
 * @param  {String|Object} text    The text to show inside the Toast, can be an HTML element or plain text
 * @param  {Object} style   The style to set for the Toast
 */
Toast.prototype.generate = function(text, style) {
    var toastStage = document.createElement("div");


    /**
     * If the text is a String, create a textNode for appending
     */
    if(typeof text === "string") {

        var lines = text.split('[[[br]]]');

        for (let i=0; i<lines.length; ++i) {
        var l = document.createTextNode(lines[i]);
        toastStage.appendChild(l);
        var r = document.createElement('br');
        toastStage.appendChild(r);
    }

    setToastStage(toastStage);
    toastStage = null;

    Toast.prototype.stylize(getToastStage(), style);
};

/**
 * Stylize the Toast.
 * @param  {Element} element The HTML element to stylize
 * @param  {Object}  styles  An object containing the style to apply
 * @return                   Returns nothing
 */
Toast.prototype.stylize = function(element, styles) {
    Object.keys(styles).forEach(function(style) {
        element.style[style] = styles[style];
        console.log(style + ": "+  styles[style]);
    });
};


/**
 * Generates styles to be used in an inline stylesheet. The output will be something like:
 * .class {background: blue;}
 * @param  {String} elementClass The class of the element to style
 * @param  {Object} styles       The style to insert into the inline stylsheet
 * @return {String}              The inline style as a string
 */
Toast.prototype.generateInlineStylesheetRules = function(elementClass, styles) {
    var out = "." + elementClass + "{";

    Object.keys(styles).forEach(function(style) {
        out += style + ":" + styles[style] + ";";
    });
    out += "}";

    return out;
};


/**
 * Show the Toast
 * @param  {String} text    The text to show inside the Toast
 * @param  {Object} options The object containing the options for the Toast
 */
Toast.prototype.show = function(text, options) {
    this.initializeStyles();
    this.generate(text, options.style.main);

    var toastStage = getToastStage();
    toastStage.classList.add(this.CLASS_TOAST_ANIMATED);
    toastStage.classList.add(this.CLASS_TOAST_GONE);
    document.body.insertBefore(toastStage, document.body.firstChild);

    // This is a hack to get animations started. Apparently without explicitly redrawing, it'll just attach the class and no animations would be done
    toastStage.offsetHeight;

    toastStage.classList.remove(this.CLASS_TOAST_GONE);
    toastStage.classList.add(this.CLASS_TOAST_VISIBLE);

    var toastStage = null;

    clearTimeout(Toast.prototype.timeout);
    Toast.prototype.timeout = setTimeout(Toast.prototype.hide, options.settings.duration);
};


/**
 * Hide the Toast that's currently shown
 */
Toast.prototype.hide = function() {
    var toastStage = getToastStage();
    toastStage.classList.remove(Toast.prototype.CLASS_TOAST_VISIBLE);
    toastStage.classList.add(Toast.prototype.CLASS_TOAST_GONE);
    toastStage = null;

    // Destroy the Toast element after animations end
    clearTimeout(Toast.prototype.timeout);
    Toast.prototype.timeout = setTimeout(Toast.prototype.destroy, Toast.prototype.TOAST_ANIMATION_SPEED);
};


/**
 * Clean up after the Toast slides away. Namely, removing the Toast from the DOM.
 */
Toast.prototype.destroy = function() {
    var toastStage = getToastStage();
    document.body.removeChild(toastStage);

    toastStage = null;
    setToastStage(null);
};

return {
    Toast: Toast
};

}) ();

1 Ответ

0 голосов
/ 27 октября 2018

измените свой код на

for (let i=0; i<lines.length; ++i) {
            var l = document.createTextNode(lines[i]);
            toastStage.appendChild(l);
            var r = document.createElement('br');
            toastStage.appendChild(r);
        }

это будет нормально работать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...