[英]JS error on WordPress site using Exit internt Popup
遇到退出意圖彈出窗口無法在基於WordPress的網站上工作時遇到問題。 該站點當前位於http://192.249.114.220/~veilco5/ ,該錯誤位於ysExit.js文件中,如下所示:
ysExit.js:145未捕獲的TypeError:無法讀取未定義的屬性“ hasOwnProperty”
那引用到:
Object.keys(defaults).forEach(function (key) {
newOptions[key] = options.hasOwnProperty(key) ? options[key] : defaults[key];
});
我認為部分問題是原始腳本使用了$,而且我知道您不能在WP網站上使用它。 所以在大多數情況下,我將$切換到jQuery,但並非全部。 也許有人可以指出我要獲得正確的引用來加載和定義腳本。 這是代碼:
(function (jQuery) {
"use strict";
jQuery.fn.ysExit = function (o) {
var $self = this;
var defaults = {
width: '40%', //popup width
height: '30%', //popup height
target: '#ys-container', //popup selector
cookieValidity: 1, //days
closeOnOutsideClick: true, //close popup if user clicks outside
delay: 0, //delay in ms until the popup is registered
debug: false, //if true, the cookie will not be set
cookieName: 'ysExit'
},
content = insertContent(),
options = fixOptions(o),
element = document.querySelector(options.target),
layer = document.querySelector('.ys-layer'),
closeBt = document.querySelector(options.target + ' .ys-popup-close'),
inner = document.querySelector(options.target + ' .ys-box'),
exitBt = document.querySelector(options.target + ' .ys-exit'),
//cookies management helper
cookies = {
set: function (name, value, days) {
var components = [name + '=' + value];
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 3600 * 1000));
components.push('expires=' + date.toGMTString());
}
components.push('path=/');
document.cookie = components.join('; ');
},
get: function (name) {
var start = name + '=',
arr = document.cookie.split(';'),
i;
for (i = 0; i < arr.length; i++) {
var item = arr[i].trim();
if (item.indexOf(start) === 0) {
return item.substring(start.length);
}
}
return null;
}
},
//the popup object
pop = {
active: false,
mouseLeftWindow: function (e) {
var from, to;
e = e ? e : window.event;
from = e.relatedTarget || e.toElement;
if (!from || from.nodeName === "HTML") {
pop.open();
}
},
setDimension: function (dimension, value) {
if (value.toString().indexOf('%') === -1) {
value = value + 'px';
}
inner.style[dimension] = value;
},
attachEvents: function () {
function close(e) {
pop.destroy();
e.preventDefault();
}
document.addEventListener('mouseout', pop.mouseLeftWindow, false);
closeBt.addEventListener('click', close);
if (exitBt) {
exitBt.addEventListener('click', close);
}
if (options.closeOnOutsideClick) {
element.addEventListener('click', close);
inner.addEventListener('click', function (e) {
e.stopPropagation();
});
}
this.active = true;
},
detachEvents: function () {
document.removeEventListener('mouseout', pop.mouseLeftWindow);
},
open: function () {
var self = this;
element.classList.add('visible');
layer.classList.add('visible');
self.detachEvents();
setTimeout(function () {
self.setDimension('width', options.width);
self.setDimension('height', 'auto');
}, 20);
setTimeout(function () {
element.classList.add('finished');
}, 200);
},
destroy: function () {
if (this.active) {
pop.detachEvents();
setTimeout(function () {
element.parentNode.removeChild(element);
layer.classList.remove('visible');
}, 200);
if (!options.debug) {
cookies.set(options.cookieName, 1, options.cookieValidity);
}
}
}
};
function insertContent() {
// console.log($self);
var body = jQuery('body').append('<div class="ys-layer"></div> <div class="ys-container" id="ys-container"><div class="ys-box"><a class="ys-popup-close" href="#">x</a><div class="ys-popup-content"></div></div></div>');
jQuery('.ys-popup-content').append($self[0].outerHTML);
$self.hide();
return true;
}
//helper functions
function fixOptions(options) {
var newOptions = {};
Object.keys(defaults).forEach(function (key) {
newOptions[key] = options.hasOwnProperty(key) ? options[key] : defaults[key];
});
return newOptions;
}
function delegate(obj, func) {
return function () {
func.apply(obj, arguments);
};
}
//start logic
if (!cookies.get(options.cookieName)) {
if (typeof options.delay !== 'number') {
throw new Error('options.delay must be a numeric value');
}
if (!element) {
throw new Error('Could not find element with selector: ' + options.target);
}
if (element.parentNode !== document.body) {
throw new Error(options.target + ' element must be placed directly inside of the <body> element');
}
setTimeout(delegate(pop, pop.attachEvents), options.delay);
}
//return object with public interface
return {
open: delegate(pop, pop.open),
destroy: delegate(pop, pop.destroy),
getElement: function () {
return element;
}
};
};
})(jQuery);
ysExit.js:145未捕獲的TypeError:無法讀取未定義的屬性“ hasOwnProperty”
要解決該錯誤,請選擇以下選項之一:
使用空object
調用ysExit()
函數,如下所示: ysExit({})
而不是 ysExit()
在插件中,將options = fixOptions(o),
更改為options = fixOptions(o || {}),
在插件中,將options = fixOptions(o),
更改為options = jQuery.extend(o, defaults),
(然后刪除fixOptions()
函數)。
另外,根據我的測試,popup 元素必須是body
元素的直接子元素。 即
<body>
<div id="popup">...</div>
</body>
..而不是 :
<body>
<div class="some-class">
<div id="popup">...</div>
</div>
</body>
因此,這是我在測試時使用的HTML和JS:
<div id="popup-demo"><!-- Direct `body` child -->
<h3>Popup Demo</h3>
<p>Content goes here...</p>
</div>
<script>
jQuery('#popup-demo').ysExit({});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.