परिचय
HTML view इवेंट प्रॉपर्टी उस Window ऑब्जेक्ट का संदर्भ लौटाती है जहां इवेंट घटित हुआ था। यह क्रॉस-विंडो/आईफ्रेम स्थितियों में उपयोगी है।
सिंटैक्स
event.view
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
margin-top: 1rem;
font-family: monospace;
font-size: 0.9rem;
background: #f5f5f5;
padding: 1rem;
border-radius: 4px;
text-align: left;
}
</style>
<body>
<h1>HTML view इवेंट प्रॉपर्टी</h1>
<button class="btn" onclick="showView(event)">View इवेंट दिखाएं</button>
<div class="show" id="output">कंसोल खोलें और बटन क्लिक करें</div>
<script>
function showView(event) {
const output = document.getElementById('output');
output.innerHTML = "इवेंट व्यू (Window ऑब्जेक्ट):\n" +
"event.view === window: " + (event.view === window) + "\n" +
"event.view.location: " + event.view.location.href;
console.log('Window ऑब्जर्वर:', event.view);
}
</script>
</body>
</html>
आउटपुट
"View इवेंट दिखाएं" बटन पर क्लिक करने पर, कंसोल में Window ऑब्जेक्ट लॉग होगा और पेज पर इसकी जानकारी प्रदर्शित होगी।
महत्वपूर्ण बिंदु
event.viewहमेशा उस विंडो को संदर्भित करता है जहां इवेंट उत्पन्न हुआ- मुख्य विंडो में, यह
windowऑब्जेक्ट के बराबर होता है <iframe>के अंदर, यह आईफ्रेम केcontentWindowको संदर्भित करता है- यह केवल पढ़ने योग्य प्रॉपर्टी है
event.target.ownerDocument.defaultViewके समान
उपयोग के मामले
- आईफ्रेम के अंदर से पैरेंट विंडो एक्सेस करना:
event.view.parent - कौन सी विंडो इवेंट उत्पन्न किया, पहचानना
- क्रॉस-ऑरिजिन आईफ्रेम संचार (postMessage के साथ)
उदाहरण: आईफ्रेम संदर्भ
// पैरेंट पेज में
<iframe src="child.html" id="myFrame"></iframe>
// चाइल्ड पेज (child.html) में
document.addEventListener('click', function(event) {
// event.view यहां आईफ्रेम का window है
const parentWindow = event.view.parent;
// parentWindow.postMessage(...)
});
ब्राउज़र समर्थन
सभी ब्राउज़रों में पूर्ण समर्थन।
