How to get the ParentElement of Object Tag?

2024/2/27 7:28:13

I have a SVG graphic embedded via object tag.

<!DOCTYPE html>
<html>
<head><title>myTitle</title><script type="text/javascript" src="script.js"></script><link href="box.css" rel="stylesheet" type="text/css" media="screen" />
</head><body>
<div id ="objectcontainer"><div id="displaybox" style="display: none;"></div><object id = "mainSVG" type="image/svg+xml" data="map_complete.svg"><img id="svgPic" src="map_complete.svg" alt="Browser fail"/></object>
</div>
</body>
</html>

In the SVG is a link:

<a id="emerBtn" xlink:href="emergency.html" onmouseover="return playVideo()" target="_parent">

The mouse over event should trigger the following:

function playVideo(){//not working, all the time nullvar doc = document.parentNode;var elem = document.parentElement;var otherElem = document.documentElement.parentElement;//working if triggered from index.htmlvar thediv = document.getElementById('displaybox');if(wasViewed == false) //show only one time{if(thediv.style.display == "none"){wasViewed = true;thediv.style.display = "";thediv.innerHTML = "<div id='videocontainer'><video autoplay controls style='display:block; margin-left:auto;" + "margin-right:auto; margin-top:150px; margin-bottom:auto; width:600px'>" +"<source src='video.mp4' type='video/mp4'>HMTL5-Video not supported!</video>" + "</div><a href='#' onclick='return palyVideo();'>CLOSE WINDOW</a>";}else{thediv.style.display = "none";thediv.innerHTML = '';}} //close anyhowelse{thediv.style.display = "none";thediv.innerHTML = '';}return false;
}

My problem is, that i cannot access the "displaybox" from the svg. I tried .parentNode, .parentElement, document.documentElement.parentElement etc. But all the time the parent element/node is null.

Does anyone know how to access the "outer" HTML elements from the object/svg?

Answer

An SVG inside an object creates a nested browsing context.

To access elements outside this child document, you need to access the parent document:

function playVideo() {// ...var parentDoc = window.parent.document;var displayBox = parentDoc.getElementById('displaybox');// ...
}
http://en.ppmy.cn/q/41626.html

Related Q&A

How do you get a browsers document.body coordinates with respect to the screen?

There must be a way of finding this. I need to figure out the coordinates of document.body with respect to a screenI need to figure out the coordinates for the question mark in the image. This will be …

Webcrypto AES-CBC Decrypt: Operation Error - The operation failed for an operation-specific reason

I have the following code to decrypt AES encrypted data with the Javascript Webcrypto-API, but it results in an "OperationError" with the message "The operation failed for an operation-s…

jquery ui date picker limit to Sundays

I have looked at some of the answers here to this type of question but could not get them to work how I needed them to. I need to have my jQuery UI datepicker only allow Sundays in the past to be selec…

d3 Update stacked bar graph using selection.join

I am creating a stacked bar graph which should update on changing data and I want to use d3v5 and selection.join as explained here https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3. …

Play a sound via javascript event in iOS 5 HTML5 app

Developing an HTML 5 application on new iPads Mobile Safari iOS 5 that displays a user prompt when a "dispatch" is received. To bring attention to the user, we have a sound that plays like th…

JavaScript this keyword and arrow function

Here this keyword which is in arrow function points to objs variable environmentvar greeting = hi;const obj = {greeting: hey,fo() {const greeting = hola;const arrowFo = () => {console.log(this.greet…

Looking for derivative script

I am desperately looking for a JavaScript that can calculate the first derivative of a function. The function always includes only one variable, x.e.g. f(x) = xf(3) = 2xConsequently, the script should …

Firebase Realtime Database - Error: Client is offline. React/NextJS

Using React with NextJS the following error occurs occasionally when fetching data from a Firebase Realtime Database. Unhandled Runtime Error Error: Error: Client is offline.I am using Firebase 9.0.1 f…

Javascript interface with RS-232 Serial Port

I am currently working on a project that involves a 4 Port A/V switch. This switch can be controlled via RS-232.The computer that will interface with the switch runs Vista. I would like to create a s…

Returning the default value for the key that cannot be found in the javascript object

When a key that is not in the object is called, it returns undefined. I want to return a string that I specify instead of undefined. for examplelet obj = {key1: key1 } let res = obj.key2;console.log(re…