Java Script, difficulté à obtenir la liste de toutes les images imbriquées dans la page
Bonjour j'ai besoin d'obtenir la liste de toutes les images pour mon script GreaseMonkey mais en fait je suppose que c'est question JavaScript générale. Ce serait génial si je pouvais accéder à chaque image imbriquée dans la page. Jusqu'à présent, j'ai eu un problème pour obtenir le nombre de cadres imbriqués dans les cadres du document principal.
La Page à laquelle j'ai affaire consiste en frameset {[15] } c'est-à-dire multiniveaux et frames contient d'autres frames. J'ai réussi à obtenir des informations sur les cadres de haut niveau du document principal frameset (dans le code Niveau 1 ) mais à ce niveau, j'obtiens des informations que le nombre d'images pour ces images est égal à 0, ce qui n'est pas vrai.
J'ai trouvé le code suivant
$(document).ready(function(){
var frames = window.frames;
var i,j;
var reportText = "level 0 > " + frames.length +"rn";
for (i = 0; i < frames.length; i++) {
var frames2 = frames[i].frames;
reportText += "level 1 - " + i + " > " + frames[i].name + " - " + frames2.length +"rn";
for (j = 0; j < frames2.length; j++) {
var frames3 = frames2[j].frames;
reportText += "level 2 - " + i + " - " + j + " > " + frames2[j].name + " - " + frames3.length +"rn";
}
}
alert(reportText);});
, Donc niveau 0, qui est en fait le document principal nombre d'images et de niveau 1 noms ou document principal cadres - ces choses sont déclarés correctement, mais pas le montant de cadres de chaque niveau 1 image. Et je veux savoir si c'est parce que mon code obtenu erreurs ou peut-être parce que les sous-trames ne sont pas complètement chargées.
J'ai essayé d'appeler mon code à partir du raccourci clavier, après tout ressemblera à son complètement chargé, mais ici un autre problème, semble que le code suivant semble ne pas fonctionner avec la page qui se compose uniquement de frameset
(function(){
document.addEventListener('keydown', function(e) {
if (e.keyCode == 72 && !e.shiftKey && !e.ctrlKey && e.altKey && !e.metaKey) {
//...my previous code inside document.ready...
}
}, false);})();
Le mieux serait si le code peignait automatiquement tous les cadres et sous-cadres, mais avec sa forme actuelle (où chaque niveau a sa propre boucle) est également bon.
Problème avec incapacité de l'utilisation de la touche de raccourci est secondaire. la chose principale est d'obtenir un nombre correct de cadres à l'intérieur des cadres du document principal et au-delà.
MODIFIER: Exemple de sortie et Ma page de test avec imbriqué frameset
Sortie
Niveau 0 > 3
Niveau 1-0 > main1-0
Niveau 1 - 1 > main2 - 0
Niveau 1-2 > main3-0
Page de Test avec imbriqué ensemble de cadres
Frame0.htm
<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">
<frame id="frmain1" name="main1" src="frame0_1.htm">
<frame id="frmain2" name="main2" src="frame0_2.htm">
<frame id="frmain3" name="main3" src="frame0_3.htm">
</frameset>
</html>
Frame0_1.htm
<!DOCTYPE html>
<html>
<frameset rows="25%,*">
<frame id="frsub11" name="sub11" src="frame0_1_1.htm">
<frame id="frsub12" name="sub12" src="frame0_1_2.htm">
</frameset>
</html>
Frame0_1_1.htm
<!DOCTYPE html>
<html>
<body style="background: darkorange;">
</body>
</html>
Frame0_1_2.htm
<!DOCTYPE html>
<html>
<body style="background: lightyellow;">
</body>
</html>
Frame0_2.htm
<!DOCTYPE html>
<html>
<frameset rows="25%,*,25%">
<frame id="frsub21" name="sub21" src="frame0_2_1.htm">
<frame id="frsub22" name="sub22" src="frame0_2_2.htm">
<frame id="frsub23" name="sub23" src="frame0_2_3.htm">
</frameset>
</html>
Frame0_2_1.htm
<!DOCTYPE html>
<html>
<body style="background: skyblue;">
</body>
</html>
Frame0_2_2.htm
<!DOCTYPE html>
<html>
<body style="background: cornflowerblue;">
</body>
</html>
Frame0_2_3.htm
<!DOCTYPE html>
<html>
<body style="background: slateblue;">
</body>
</html>
Frame0_3.htm
<!DOCTYPE html>
<html>
<frameset rows="25%,*">
<frame id="frsub31" name="sub31" src="frame0_3_1.htm">
<frame id="frsub32" name="sub32" src="frame0_3_2.htm">
</frameset>
</html>
Frame0_3_1.htm
<!DOCTYPE html>
<html>
<body style="background: darkgreen;">
</body>
</html>
Frame0_3_2.htm
<!DOCTYPE html>
<html>
<body style="background: lightgreen;">
<a id="test" href="http://www.google.com">testlink</a>
</body>
</html>
3 réponses
Le problème est l'événement sur lequel vous appelez cette. {[2] } est déclenché lorsque le DOM actuel a été chargé. Il est donc déclenché lorsque les 3 trames principales sont chargées. Mais à ce stade, ces cadres n'ont pas encore chargé leur iframes. En changeant l'événement à la fenêtre .onload, vous devriez avoir le résultat attendu. Comme ceci:
$(window).load(function(){
...
Ou
window.onload = function(){
...
Voir la fenêtre .onload: https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload
Le l'événement load se déclenche à la fin du processus de chargement du document. À ce point, tous les objets dans le document sont dans le DOM, et tous les images, scripts, liens et sous-cadres {[6] } ont terminé le chargement.
Solution De Code De Travail
Utilise une fonction récursive et window load événement, comme ça (fonctionne dans les dernières versions de Chrome, FireFox et Edge; n'a pas testé les autres. Fonctionne probablement dans IE5 + aussi).
Utilisez ce code dans votre niveau supérieurframeset, frame0.htm :
<!DOCTYPE HTML Frameset DTD>
<html>
<head>
<script>
window.onload = function()
{
var allFrames = [];
function recursFrames(context)
{
for(var i = 0; i < context.frames.length; i++)
{
console.log(context.frames[i].name + " -- " + context.frames[i].location.href);
allFrames.push(context.frames[i]);
recursFrames(context.frames[i]);
}
}
recursFrames(window);
console.log("Frames count: " + allFrames.length);
}
</script>
</head>
<frameset cols="25%,*,25%">
<frame id="frmain1" name="main1" src="frame0_1.htm">
<frame id="frmain2" name="main2" src="frame0_2.htm">
<frame id="frmain3" name="main3" src="frame0_3.htm">
</frameset>
</html>
Cet écrit sur la console juste pour vous montrer ce qui se passe, mais bien sûr, vous pouvez faire ce que vous voulez avec cette information. Il crée une liste plate (tableau) de tous les cadres enfants, mais vous pourrait structurer hiérarchiquement si vous le souhaitez, ou que ce soit.
HTML 5 rappel
Vous utilisez le HTML5 DOCTYPE, mais frameset n'est pas pris en charge par HTML5. Mais c'est au navigateur de décider quand arrêter de soutenir cela, et beaucoup d'entre eux le font encore. Je vous recommande d'arrêter d'utiliser frameset dès que possible. Utilisez iframe à la place si vous avez besoin d'un comportement similaire à un cadre (différentes fenêtres et documents).
Frameset n'est pas pris en charge dans html5.
Veuillez consulter la démo suivante: frameset Demo . J'ai modifié les fichiers htm. L'idée est d'écouter l'événement frameset onload et d'accéder à son contenu après le déclenchement de l'événement onlnoad.
Pour accéder au contenu de la trame enfant, la stratégie de même origine doit être invoquée.