窗口添加属性返回未定义

Question

我想在香草JS的外部脚本后加载和使用

const script = document.createElement('script');                                                                        
script.type = 'text/javascript';                                                                                        
script.src = '//mozilla.github.io/pdf.js/build/pdf.js';                                                                 
document.querySelector('footer').after(script);                                                                                                                                           
                                                                                                                                                       
console.log(window); // return following
/*
Window
[...]
​
"pdfjs-dist/build/pdf": Object { addLinkAttributes: Getter, getFilenameFromUrl: Getter, LinkTarget: Getter, … }
​
pdfjsLib: Object { addLinkAttributes: Getter, getFilenameFromUrl: Getter, LinkTarget: Getter, … }
*/

console.log(window["pdfjs-dist/build/pdf"]); // return undefined                     
console.log(window.[pdfjsLib]); // return undefined
console.log(window.pdfjsLib); // return undefined

我如何获得这个窗口对象，或者为什么我不能?

Answer 1

正如评论所指出的，这是浏览器在欺骗你:console.log(someobject)经常创建某种"活动";日志，当您在控制台中查看对象时，它显示对象的当前状态，而不是打印日志时的状态。

如果对象是简单的，您可以看到原始值，如:

let obj={a:0};
console.log(obj);
obj.a=1;
console.log(obj);

在这里看起来不错，如果你打开浏览器的控制台，你会看到一些看起来不错的东西:

>{a: 0}
>{a: 1}

但是如果你"打开"第一个三角形变成了

.{a: 0}
a: 1
>__proto__: Object

所以"one-liner"显示原始状态，但深度视图显示当前状态。如果一个对象是"长"的，那么在一行代码中您将无法看到它的原始状态，您只能看到它的当前状态(在您打开三角形之后):

let obj={q:0,w:0,e:0,r:0,t:0,y:0,u:0,i:0,o:0,p:0,s:0,d:0,f:0,g:0,h:0,j:0,k:0,l:0,z:0,x:0,c:0,v:0,b:0,n:0,m:0}
console.log(Object.keys(obj).length);
console.log(obj);
obj.a=1;
console.log(Object.keys(obj).length);
console.log(obj);

这里对象最初没有a字段，看到Object.keys(obj).length第一次产生25，第二次才变成26。但是您无法通过查看一行程序看出这一点，它只显示了4-6-6字段，然后是...，如果您查看细节，a:0也将出现在第一个日志中。(同样，在浏览器的控制台中)。

这也是脚本发生的事情，如果您等待脚本实际加载(onload处理程序已添加)，window突然有2个新字段，您想使用的:

const script = document.createElement('script');
script.type = 'text/javascript';
script.onload=function(){
console.log("Yep");
console.log(Object.keys(window).length);
console.log(typeof window["pdfjs-dist/build/pdf"]);
console.log(typeof window.pdfjsLib);
};
script.src = '//mozilla.github.io/pdf.js/build/pdf.js';
document.querySelector('#footer').after(script);console.log("Nope");
console.log(Object.keys(window).length);
console.log(window["pdfjs-dist/build/pdf"]);
console.log(window.pdfjsLib);

<div id="footer"></div>