javascript - Iframe 内の Iframe は変更できません

Question

iframe 内に 1 つの iframe があり、このコードで画像の src を変更したい

window.top.frames[0].frames[0].document.getElementById("maquina").src = "https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png";

試してみるとうまくいきますが、その要素の.srcを読んだときのコードでのみ、ページの変更を見ることができません

Answer 1

You cannot manipulate the contents of an iframe from within the parent frame without a global method for accessing the child DOM. There is an answer Here that suits your needs, but I will copy below for reference:

In the child iframe:

parent.childGetElementById = function (id) {return document.getElementById(id);}
parent.childLoaded();

In the parent:

function childLoaded() {var dom = childGetElementById('someid');}

Assuming you actually have access to the child page, I would recommend modifying your design away from the use of iframes.

[Answering the comment]

Well it depends on if you're just using straight HTML, or a scripting language (like PHP). If pure HTML, you can use a server side includes with

<!-- #include virtual="path/to/included/file.html" -->

In PHP, you can include the page like this

require('/real/path/to/included/file.php');

Don't get me wrong, iFrames can be useful in some specific situations (circumventing cross-domain origin policies, oAuth implementations, etc); they are more often abused than correctly used.