How to edit properties of the elements in the iframe?

Write a simple visual html editor.

On the php page, there is an IFRAMEin HTML. Goal by means of SCRIPT, edit the properties of the elements.
<iframe id='iframe' name='iframe' src="/index.html" style="width: 100%; border: none; overflow: auto; "></iframe>


I wrote this script, which is passed by id "text," and includes editing.

var editable_elements = document.querySelectorAll(".text");
for (let i = 0; i < editable_elements.length; i++) {
 if ( editable_elements[i].text !== "") { 
 editable_elements[i].setAttribute("contenteditable", true); 
}
}

Was somehow to do this in the IFRAMEand not in the main document.
I tried something like this, but alas does not work:
var iframe = document.getElementById('iframe');
var editable_elements = window.iframe.documentElement.querySelectorAll(".text");

100% I messed up who worked with IFRAME, write to me please how to implement it.
April 7th 20 at 10:59
4 answers
April 7th 20 at 11:01
If you can change the code of the frame, for example, you can use postMessage (explanation and example) to communicate with the frame.
April 7th 20 at 11:03
Fortunately, you do not have access to the iframe.
Iframe is on my website. What's the problem, read carefully. - Elliot_Herzog commented on April 7th 20 at 11:06
@Elliot_Herzog, change code page and pererisovyvali the frame directly to the page in the frame you do not have access. - Rashawn.OConner commented on April 7th 20 at 11:09
@Elliot_Herzog, the problem is that this is not your iframe. It is impossible for you. - Orrin commented on April 7th 20 at 11:12
@Rashawn.OConner, I do still think that it is possible to change values in iframe, but if not, then you have to write a crutch. - Elliot_Herzog commented on April 7th 20 at 11:15
@Orrin, this is my iframeis on the same page. - Elliot_Herzog commented on April 7th 20 at 11:18
@Elliot_Herzog, so that in the frame?
floor page? - Rashawn.OConner commented on April 7th 20 at 11:21
@Rashawn.OConner, page you want to edit, for example "/index2.html". I edited a little description, maybe you will understand. - Elliot_Herzog commented on April 7th 20 at 11:24
@Elliot_Herzog, well then a different page. Can upload the code for you, edit, and then redraw. Kontekt inside iframe can not touch it, no matter what the content, at least directly. - Rashawn.OConner commented on April 7th 20 at 11:27
@Rashawn.OConner, no, quite. Another thing is that contenteditable is not a magic wand and it's a little hard to work with. - Carolina_Jakubows commented on April 7th 20 at 11:30
@Rashawn.OConner, ie offer to upload the code from the iframe into a variable. And then edit all of it? If so, then I know how to get the iframe code, it remains only to edit the variable.
var iframe = document.getElementById('iframe');
var iframeDocument = '<!DOCTYPE html>\n' + window.iframe.document.documentElement.outerHTML;
- Elliot_Herzog commented on April 7th 20 at 11:33
April 7th 20 at 11:05
The only thing is to cause the frame with get parameters, but I guess that's not what you need.
That's not what I wanted. - Elliot_Herzog commented on April 7th 20 at 11:08
April 7th 20 at 11:07
To edit the iframe not.
If the iframe of your website, then you can put the iframe resizer, which uses postMessage to communicate between iframe and parent.

Another question, why make a fuss. What is wrong with AJAX?

Find more questions by tags JavaScriptHTML