1
How can I select and manipulate elements of all window.frames that are being generated by each SVG within a tag <object> that I put on the page ?
I’m looking to add events click() in the elements <g> of the archives .svg dynamically loaded into Ivs, inside the element Object through the attribute data . Files and index page are in the same domain.
For the moment I am able to manipulate the elements only when the content of the window where svg is. I thought it was possible to click on the main window to take advantage of a single document.
but apparently...
W3.org 13.5 Notes on Embedded Documents
" An Embedded Document is entirely Independent of the Document in which it is Embedded "
"An embedded document is completely independent of the document in which it is embedded"
" If a Document contains frames ( tags), the browser creates one window Object for the HTML Document, and one Additional window Object for each frame."
"If a document contains frames (tags), the browser creates a window object for the HTML document and an additional window object for each frame".
This image is the setting of the DOM panel
for each added svg a new index appears and a Window.
The index is like this
where each Window in the DOM panel is the path being assigned in the attr data.
<!-- Html reduzido só para mostrar em que posição do
Html ele está e como estão seus atributos, lembrando
que o attr data recebe um php:pdo query e a div .svg
é gerado dinamicamente através de um condição e echo
php -->
<html>
<head>
<script/>
</head>
<body>
<div></div>
<div></div>...
<?php
if($condicao){
echo "
<div class='svg'>
<object id='svg_id' data= ' ".$evt['local']." ' type='image/svg+xml' ></object>
</div>";
?>
</html>The way I’m accessing the SVG elements is the following, I’ve done so much with Javascript and also tried with Jquery.
ps: Jquery I won’t post because the code is based on javascript instead of contentDocument tried with Contents() but in the end, even with Jquery, I could only when I mixed contentDocument together with a Window index.
To select all elements of SVG and of Window i tried using selectors always trying their functions all or (*). But in the end, whenever I used a selector like this I get stuck when I have to choose a Window index.
Taking advantage, what does this mean #Document ?
Note that the <g> from above, from SVG One, is receiving the events, and from below, SVG Two, no, I would like everyone to be, and in the future the other SVG inserted.
I read the whole question and realized that the problem is not related to what the title says (I may be wrong) nor in relation to SVG manipulation. It wouldn’t just be the fact that the new elements aren’t getting the event click?
– Sam
Hmm perhaps I should focus the question more on this question of frames ? The elements do not receive the event perhaps, because I do not know how to access all frames at once ? my doubt is there, how to manipulate svg elements in these situations that are generated multiple frames, working only when the frame index that SVG is receiving is specified... If you have suggestions please edit! :)
– Bender
Take a look at this Jsfiddle for an idea. When new elements are added to the page, the event must be recreated: https://jsfiddle.net/9n0hy6p8/
– Sam
@dvd That’s exactly what I wasn’t seeing and understanding, wow!
– Bender