对方法或属性访问的意外调用-appendChild（）
[英]Unexpected call to method or property access - appendChild()
问题描述
I have created a bookmarklet that executes the below code, adding css styling to the page. 
我创建了一个书签，该书签执行以下代码，并在页面中添加CSS样式。 It works on all tried sites in Chrome and Firefox, but fails for some sites on IE. 它可以在Chrome和Firefox中所有尝试过的网站上使用，但对于IE上的某些网站则无法使用。 It's always the same sites that fail. 失败的站点总是相同的。
The fourth line fails with "Unexpected call to method or property access" for SOME sites, only on IE. 对于仅在IE上的某些站点，第四行失败并显示“对方法或属性的意外调用”。
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(""));
head.appendChild(style);
Two sites that fail on IE 10: 在IE 10上失败的两个站点：
http://www.momswhothink.com/cake-recipes/banana-cake-recipe.html
http://www.bakerella.com/
4 个解决方案
解决方案1
3 已采纳 2013-08-23 19:27:32
I think your problem is this line: 我认为您的问题是此行：
style.appendChild(document.createTextNode(""));
Here you are inserting a Text Node into a Style element, which according to the HTML specification is not allowed, unless you specify a scoped attribute on the style. 在这里，您正在将Text Node插入到Style元素中，根据HTML规范，这是不允许的，除非您在样式上指定了scoped属性。
Check the specification of style here ( Text Node is flow content). 在此处检查样式的规格（“ Text Node为流内容）。
You can find good ways to create the style element in a crossbrowser way here . 您可以在此处找到以跨浏览器方式创建样式元素的好方法。
解决方案2
0 2013-08-23 19:04:12
probably because you forgot to add document.ready() 可能是因为您忘记添加document.ready（）
Using jquery 使用jQuery
$(document).ready(function(){
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(""));
head.appendChild(style);
});
Using javascript 使用JavaScript
Try wrapping your javascript in an onload function. 尝试将您的JavaScript包装在onload函数中。 So first add: 因此，首先添加：
<body onload="load()">
function load() {
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(""));
head.appendChild(style);
}
解决方案3
0 2013-08-23 19:34:18
I'm not sure why you're getting that error in IE10... I know in IE<9 an error is thrown if you try to modify the innerHTML of a <style> tag. 我不确定为什么在IE10中会收到该错误...我知道在IE <9中，如果您尝试修改<style>标记的innerHTML，则会引发错误。 It's still doable, you just have to do a bit of a workaround. 它仍然可行，您只需要做一些变通方法。 For example (using jQuery): 例如（使用jQuery）：
var customCSS = "body { color: red; }";
var customStyle = $('<style type="text/css" />');
try {
$(customStyle).html(customCSS); // Good browsers
} catch(error) {
$(customStyle)[0].styleSheet.cssText = customCSS; // IE < 9
}
$(customStyle).appendTo('head');
Hope this helps. 希望这可以帮助。
解决方案4
0 2014-05-06 03:12:31
Do you really have to dynamically add the style section to the page? 您是否真的必须在页面中动态添加样式部分？ What about adding the attribute, itself, on the fly, like this: 像这样动态添加属性本身呢？
$(document).ready( function() {
$('[id="yourObjID"]').css('yourAttribute','itsvalue');
});
Adding the style section dynamically, rather than the attribute, seems like way overkill, to me. 对我来说，动态添加样式部分而不是属性，似乎有点过头了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.