gpt4 book ai didi

javascript - 在我的页面中使用 XML xlink 会导致 JS 错误 - TypeError... ...不是函数

转载 作者:行者123 更新时间:2023-11-30 16:01:22 25 4
gpt4 key购买 nike

我正在将一个小部件集成到我的页面 (Houzz) 中。它有效,但前提是我删除了我的 SVG 中的所有 xlink。如果有任何 xlink,我会得到错误:

TypeError: elem.className.split is not a function

SVG 是:

<svg version="1.1" id="Layer_4_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1309.016px" height="634.008px" viewBox="0 0 1309.016 634.008" enable-background="new 0 0 1309.016 634.008"
xml:space="preserve" class="js-animate" style="max-width: 100%;">

<a xlink:type="simple" xlink:href="/meet-the-team"></a>

</svg>

脚本是:

(function(d,s,id){if(!d.getElementById(id)){var js=d.createElement(s);js.id=id;js.async=true;js.src="//platform.houzz.com/js/widgets.js?"+(new Date().getTime());var ss=d.getElementsByTagName('script')[0];ss.parentNode.insertBefore(js,ss);}})(document,"script","houzzwidget-js");

我创建了一个 fiddle ,但它显示了不同的行为 - 我必须从 svg 中删除宽度/高度以使小部件工作: https://jsfiddle.net/v0fkr8jx/

我的测试页面: http://uprightconstruction.co.uk/index2

这是引用的 Houzz 脚本。错误出现在 Firebug 的第 16 行附近:

window.hzmr = window.hzmr || []; window.hzmr.push("widgets:2406");
(function() {
function createIFrame(width, height) {
var iframeElem = document.createElement('iframe');
iframeElem.setAttribute("scrolling","no");
iframeElem.allowTransparency = true;
iframeElem.border = 0;
iframeElem.frameBorder = 0;
iframeElem.style.border = 'none';
iframeElem.width = width;
iframeElem.height = height;
return iframeElem;
}

function containsClassName(elem, className) {
var classNames = elem.className.split(' ');
for(var i=0; i<classNames.length; i++) {
if(className == classNames[i]) {
return true;
}
}
return false;
}

function cleanLocale(locale) {
var knownLocales = {"en-us":true,"en-gb":true,"en-au":true,"de-de":true,"fr-fr":true,"ru-ru":true,"ja-jp":true,"it-it":true,"es-es":true,"da-dk":true,"nb-no":true,"fi-fi":true,"sv-se":true,"en-ie":true,"en-nz":true,"en-sg":true,"en-in":true};
if(locale && locale.toLowerCase() in knownLocales) {
return locale.toLowerCase();
}
return 'en-us';
}

function processWidgets(domId) {
var links = [];
if(typeof domId == 'string') {
if(domId.charAt(0) == '#') {
domId = domId.substr(1);
}
var elem = document.getElementById(domId);
if(elem) {
links.push(elem);
}
} else if(typeof domId != 'undefined' && ('nodeName' in domId)) {
links.push(domId);
} else {
links = document.getElementsByTagName('a');
}
var pid = new Date().getTime() + '' + Math.floor(Math.random()*1000000);
var houzzLinks = [];
var houzzReviews = [];
for (var i=0; i < links.length; i++) {
if(containsClassName(links[i],'houzz-share-button')) {
houzzLinks.push(links[i]);
} else if(containsClassName(links[i], 'houzz-review-widget')) {
houzzReviews.push(links[i]);
}
}
for (var i=0; i < houzzReviews.length; i++) {
var review = houzzReviews[i];
var pro = review.getAttribute('data-pro');
var mini = review.getAttribute('data-size');
mini = (mini == 'mini');
var locale = cleanLocale(review.getAttribute('data-locale'));
var iframeWidth = mini?225:300;
var iframeHeight = mini?130:435;

if(pro) {
var reviewUrls = {"en-us":"http:\/\/www.houzz.com\/reviewWidget","en-gb":"http:\/\/www.houzz.co.uk\/reviewWidget","en-au":"http:\/\/www.houzz.com.au\/reviewWidget","de-de":"http:\/\/www.houzz.de\/reviewWidget","fr-fr":"http:\/\/www.houzz.fr\/reviewWidget","ru-ru":"http:\/\/www.houzz.ru\/reviewWidget","ja-jp":"http:\/\/www.houzz.jp\/reviewWidget","it-it":"http:\/\/www.houzz.it\/reviewWidget","es-es":"http:\/\/www.houzz.es\/reviewWidget","da-dk":"http:\/\/www.houzz.dk\/reviewWidget","nb-no":"http:\/\/www.houzz.no\/reviewWidget","fi-fi":"http:\/\/www.houzz.fi\/reviewWidget","sv-se":"http:\/\/www.houzz.se\/reviewWidget","en-ie":"http:\/\/www.houzz.ie\/reviewWidget","en-nz":"http:\/\/www.houzz.co.nz\/reviewWidget","en-sg":"http:\/\/www.houzz.com.sg\/reviewWidget","en-in":"http:\/\/www.houzz.in\/reviewWidget"};
var iframeSrc = reviewUrls[locale] + '/' + encodeURIComponent(pro) + '/' + (mini?'mini':'');
var iframeElem = createIFrame(iframeWidth, iframeHeight);
review.parentNode.replaceChild(iframeElem, review);
iframeElem.src = iframeSrc;
}
}
for (var i=0; i < houzzLinks.length; i++) {
var link = houzzLinks[i];

var imageURL = link.getAttribute('data-img');
var linkURL = link.getAttribute('data-url');
var title = link.getAttribute('data-title');
var showCount = link.getAttribute('data-showcount') == '1';
var hzID = link.getAttribute('data-hzid');
var whiteBg = link.getAttribute('data-whitebg');
var format = link.getAttribute('data-format');
var locale = cleanLocale(link.getAttribute('data-locale'));
var identifier = i + '' + Math.floor(Math.random()*1000000);
link.id = 'hzbtn' + identifier;
var referer = document.location.href;

var buttonWidths = {"en-us":52,"en-gb":52,"en-au":52,"de-de":75,"fr-fr":88,"ru-ru":52,"ja-jp":52,"it-it":52,"es-es":52,"da-dk":52,"nb-no":52,"fi-fi":52,"sv-se":52,"en-ie":52,"en-nz":52,"en-sg":52,"en-in":52};
var buttonWidth = buttonWidths[locale];

var buttonUrls = {"en-us":"http:\/\/www.houzz.com\/buttonWidget","en-gb":"http:\/\/www.houzz.co.uk\/buttonWidget","en-au":"http:\/\/www.houzz.com.au\/buttonWidget","de-de":"http:\/\/www.houzz.de\/buttonWidget","fr-fr":"http:\/\/www.houzz.fr\/buttonWidget","ru-ru":"http:\/\/www.houzz.ru\/buttonWidget","ja-jp":"http:\/\/www.houzz.jp\/buttonWidget","it-it":"http:\/\/www.houzz.it\/buttonWidget","es-es":"http:\/\/www.houzz.es\/buttonWidget","da-dk":"http:\/\/www.houzz.dk\/buttonWidget","nb-no":"http:\/\/www.houzz.no\/buttonWidget","fi-fi":"http:\/\/www.houzz.fi\/buttonWidget","sv-se":"http:\/\/www.houzz.se\/buttonWidget","en-ie":"http:\/\/www.houzz.ie\/buttonWidget","en-nz":"http:\/\/www.houzz.co.nz\/buttonWidget","en-sg":"http:\/\/www.houzz.com.sg\/buttonWidget","en-in":"http:\/\/www.houzz.in\/buttonWidget"};

var iframeSrc = buttonUrls[locale] + '?url='
+ encodeURIComponent(linkURL);
if(imageURL) {
iframeSrc += '&img=' + encodeURIComponent(imageURL);
}
if(title) {
iframeSrc += '&title=' + encodeURIComponent(title);
}
if(showCount) {
iframeSrc += '&count=1';
}
if(whiteBg) {
var whiteBgValue = 0;
if(String(whiteBg) == '1' || whiteBg.toLowerCase() == 'true') {
whiteBgValue = 2;
} else if(String(whiteBg) == '0' || whiteBg.toLowerCase() == 'false') {
whiteBgValue = 1;
}
iframeSrc += '&whiteBg=' + encodeURIComponent(whiteBgValue);
}
if(hzID) {
iframeSrc += '&hzid=' + encodeURIComponent(hzID);
}
iframeSrc += '&locale=' + encodeURIComponent(locale);
iframeSrc += '&ref=' + encodeURIComponent(referer);
iframeSrc += '&pid=' + encodeURIComponent(pid);

if(format == 'custom') {
if(link.getAttribute('data-loaded') == '1') { continue; }
iframeSrc += '&fmt=' + encodeURIComponent(format);
iframeSrc += '&domid=' + encodeURIComponent(identifier);
var extElem = document.createElement('script');
extElem.setAttribute('type','text/javascript');
extElem.id = 'hzjs' + encodeURIComponent(identifier);
extElem.src = iframeSrc;
link.parentNode.appendChild(extElem);
} else {
var iframeElem = createIFrame(buttonWidth + (showCount?57:0), 20);
link.parentNode.replaceChild(iframeElem, link);
iframeElem.src = iframeSrc;
}
}
}

window.houzz = window.houzz || {};
window.houzz.processWidgets = processWidgets;
processWidgets();
})();

关于造成这种情况的原因有什么想法吗?

最佳答案

这是因为您正在加载的脚本正在获取名为 a 的所有元素.这需要 HTMLSVG <a> 元素无区别。

问题是对于 SVG 元素, class 属性或 className属性是可动画的。这意味着当你调用 a.className ,你会得到一个 SVGAnimatedString对象,由两个键中的两个字符串组成:baseValanimVal .
这些键中的每一个都有一个 split方法,而不是 SVGAnimatedString 本身。

因此应该修改代码以找出这是否是 HTML <a> (通过检查其 namespaceURI 属性),或检查 split 是否方法在调用之前可用,或者通过调用 elem.getAttribute('class')而不是 elem.className .

关于javascript - 在我的页面中使用 XML xlink 会导致 JS 错误 - TypeError... ...不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37681299/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com