Links de même page Travailler en référençant un autre élément qui a par exemple. Un lien comme celui-ci est relatif. Cependant, si j'utilise cette même syntaxe dans l'iframe dans mon terrain de jeu latex.js, il ne fera que faire défiler jusqu'à l'élément de destination, mais (RE) chargera l'ensemble. Page des aires de jeux à l'intérieur de l'ifame. (Notez que j'ai défini le contenu de l'iframe par programme avec Exemple: Aire de jeu de latex.js , à la fin de la première section, cliquez sur le lien" Voir aussi Secy 11. " Dans l'iframe sur le côté droit. Quelle pourrait être la raison? Par conséquent, la question devient: existe-t-il un moyen de faire référence au ID = "SEC-ID" sur la même page, en utilisant iframe.srcdoc = html ) < base> ). Le problème commence par un iframe qui a son contenu défini avec SRCDOC : aucune URL de base unique n'est spécifiée et, dans ce cas, l'URL de base du cadre / document de base est utilisée - le terrain de jeu dans mon cas (Voir le standard HTML ). SRCDOC iframe dans une URL de base? Ou est-il possible de rendre le navigateur pas prépendez la base? ou pour faire une URL de base qui ne modifie pas le relative # SEC-ID URL?
3 Réponses :
Je ne sais pas exactement comment vous pourriez résoudre ce problème, je pense que c'est parce que le srcdoc code>, vous ne pouvez pas utiliser le src code> avec le type de contenu car La limite de caractères, mais vous pouvez le convertir en un blob code> et cela fonctionne un peu, le style est perdu cependant. Peut-être que vous pouvez l'utiliser comme point de départ, en fonction de votre page: // Get the document content
const doc = document.querySelector('iframe').srcdoc;
// Convert it to blob
const blob = new Blob([doc], {type : 'text/html'});
// Load the blob on the src attr
document.querySelector('iframe').src = URL.createObjectURL(blob);
// Remove srcdoc to allow src
document.querySelector('iframe').removeAttribute('srcdoc');
Cela peut réellement devenir une bonne solution de contournement en contournant le problème SRCDoc . Mais je dois d'abord comprendre comment réparer les styles cassés ...
Oui, il est difficile, j'essaierais d'attribuer les styles après avoir chargé le contenu avec JavaScript, mais je ne sais pas si vous pouvez le faire. Bonne chance.
En outre, cette solution a un inconvénient de plus: il est assez facile d'utiliser uniquement des chemins absolus pour fixer les styles, mais si j'utilise le terrain de jeu localement pour tester, ces chemins sont Fichier: /// ... Les chemins, et ils ne sont pas autorisés avec des blobs ou iframe.src . Donc, je vais aller avec l'autre solution de contournement.
Pour l'enregistrement, il semble que ma question ne soit pas possible, c'est-à-dire qu'il n'est pas possible d'utiliser des liens de même page relativement dans un iframe qui a son contenu de contenu utilisant SRCDOC . Une solution de contournement doit être utilisée, voir l'autre réponse.
Qu'en est-il de la capture de l'événement et du défilement à l'ancre souhaitée?
Idée brillante! Je ne pense pas que votre code soit correct, cependant: il devrait courir à l'intérieur de l'iframe, non? Alors pourquoi le $ ('. Iframe') ?
Aussi, un autre nitpick ;-) pas tous les doivent être choisis, uniquement ceux avec un href qui commence par # - mais je Peut facilement résoudre celui-ci, l'idée est ce qui compte.
Génial d'entendre, le $ ('. Iframe') est l'élément à faire défiler, c'est pourquoi il est sélectionné.