如何解决HTML内联处理程序如何访问全局窗口对象和其中的变量?
我正在测试一段代码。我有一个名为write
的函数,并且我使用了一个带有内联onclick
处理函数的按钮来运行write()
。
function write(text) {
alert(text)
}
<button onclick='write("Some text")'>
Write
</button>
令我惊讶的是,write()
实际上执行了document.write()
。可以肯定的是,我还测试了其他一些功能。
function write(text) {
alert(text)
}
<button onclick='console.log(body)'>
document.body
</button>
然后,我想知道他们是否可以访问window
。事实证明他们可以。但是,document.window
是undefined
。
console.log(document.window)
/*
Note that this example may not work due to StackSnippets using iframes
*/
<button onclick='window.open()'>
Open blank page
</button>
function doSomething(text) {
console.log(text)
}
<button onclick='doSomething("Some text")'>
doSomething
</button>
所以,我的问题是,即使window
是全局范围,而document
是document.window
,内联事件处理程序为什么也可以访问undefined
的属性?>
解决方法
在内联事件处理程序中,如果存在this.property
,则默认为该值。如果不是,则返回到document.property
。如果甚至不存在,最后,它将在全局window
范围内执行该代码。
一些例子
在此示例中,内联处理程序默认为document
作为全局范围。
document.someProperty = 'something'
var someProperty = 'something else'
<button onclick='console.log(someProperty)'>
Button
</button>
在此示例中,其默认值为window
。
var someProperty = 'something'
<button onclick='console.log(someProperty)'>
Button
</button>
在另一个示例中,它默认为this
,即元素。
<button style='color: red' onclick='console.log(style.color)'>
Button
</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。