Modyfikacja markup'u w <iframe>

infinityhost napisał(a):

Ogarnia ktoś?

Ja nie ogarniam i nie chce mi się ogarnąć tego kodu, bo tego tak dzisiaj nikt nie pisze (kod w stringach, bez przesady...). No może 20 lat temu się tak pisało. Jeśli to część jakiegoś zadania / rzeczy, którą chcesz robisz od zera w 2022 (a nie kawałek legacy kodu sprzed 20 lat znalezionego na starej dyskietce), to napisz to najpierw jakoś po ludzku.

zamiast bawić się w ustawianie atrybutu onClick na stringa...

document.querySelectorAll("BUTTON")[0].setAttribute("onClick","u=pobierz()");
// ...

to zrób normalnie po ludzku addEventListener i przypisz funkcję do eventu:

document.querySelectorAll("button")[0].addEventListener("click", () => {
   u=pobierz();
});
document.querySelectorAll("button")[1].addEventListener("click", () => {
   wyswietl(u);
});
document.querySelectorAll("button")[2].addEventListener("click", () => {
   wyczysc();
});

I potem można to analizować i się zastanawiać, co jest nie tak.

druga funkcja nie robi nic - jeśli dodam alert() wyświetla komunikat.

co wyświetla ten komunikat? Albo lepiej - zrób console.log i zobacz w konsoli developerskiej w przeglądarce, co ci wyświetla. Czy nowa jest dobrą wartością i czy łapie element el.

 function wyswietl(nowa){ 
    console.log("nowa", nowa); 
    const el = document.querySelectorAll("DIV")[0];
    console.log("el", el);
    el.innerHTML=nowa;
 };

BTW
wrzuciłem ten kod, który masz w pierwszym poście do pliku HTML (otaczając JS w tag <script>)

<button>Pobranie</button><button>Zapisz</button><button>Kasowanie</button>

<DIV>dddd</DIV>

<script>

	let u=0;
function pobierz(){ let i = prompt("Jaka nazwa?");return i;};
function wyswietl(nowa){ document.querySelectorAll("DIV")[0].innerHTML=nowa;};
function wyczysc(){document.querySelectorAll("DIV")[0].innerHTML="";};

document.querySelectorAll("BUTTON")[0].setAttribute("onClick","u=pobierz()");
document.querySelectorAll("BUTTON")[1].setAttribute("onClick","wyswietl(u);");
document.querySelectorAll("BUTTON")[2].setAttribute("onClick","wyczysc()");

</script>

i to działa (w Chrome przynajmniej). Może więc problem leży gdzie indziej? Bo mimo, że napisane jest po "nienowoczesnemu", to jednak robi to, co ma robić.

Myślałem, że piszę wyraźnie ale powtórzę

document.querySelectorAll("BUTTON")[1].setAttribute("onClick","wyswietl(u);");  - NIE DZIAŁA.
document.querySelectorAll("BUTTON")[1].setAttribute("onClick","alert();wyswietl(u);"); - WYŚWIETLA KOMUNIKAT i dalej nie robi NIC.

Przecież to musi działać, bo funkcja wyczyść czyści pole DIV czyli ma do niego dostęp. A chodzi o to żeby wypełnić jego wnętrze tekstem. Jak dodam jeszcze jeden alert na końcu to wyświetli komunikat 2 razy a środkowej fukcji nie uruchomi i tak.

@LukeJL: ale co tu analizować? Przecież to jest parę linijek które muszą działać.
Jeszcze raz powtórzę. Uruchamiam w oknie iframe funkcję eval() której parametrem jest textarea.value z window.top.

No właśnie tak jak napisałem (edytując swój poprzedni post), wrzuciłem ten kod, co masz i on działa. Czyli wydaje się, że sam kod nie jest przyczyną niedziałania.

infinityhost napisał(a):

Uruchamiam w oknie iframe funkcję eval() której parametrem jest textarea.value z window.top.

Jak to robisz? I po co w sumie odpalasz eval? Co cię skłoniło do tego?

Robię konsole do generowania strony HTML - skrypt w oknie głównym pobiera zawartość z 3 okien textarea (w jednym mam kod HTML, w drugim CSS i w trzecim kod skryptu) + pare funkcji operujących na wnętrzu docelowego iframe(żeby działały wewnątrz). I potem to wszystko zapisuje do iframe za pomocą srcdoc. I potem pod przyciskiem w window.top mam podpięte zdarzenie onClick które uruchamia funkcje (nie pamietam czy ten eval jest w tym iframe czy nie)(wcześniej dodaną do kodu w oknie głównym) z zawartościa textarea.value z okna głównego. Chyba normalne. Ty tego nie robiłeś?

Problem jest w tym , że to samo polecenie alert() wykonane w najbliższym otoczeniu funkcji wyswietl() działa a już ona sama nie. Jeszcze dziwniejsze jest że ta sama procedura przygotowana pod następnym przyciskiem czyści to pole DIV (ktore ma czyścic) czyli dostęp do niego ma.

http://infinityhost.cba.pl/

tam klikasz przycisk "funkcje" w oknie po lewej stronie i ładuje ci środowisko.

Skopiowałem Twój kod do okna HTML i jest ten sam wynik - alertuje, czyści div ale go nie nadpisuje jego zawartości. W edge to nie działa, w firefox też nie. W operze też nie.

Przez to z całą robotą stoję.

W sumie to kod generujący wygląda tak (tworzący okno iframe'a) ---

<button class="work_area_select_button" onClick= "preview_frame.srcdoc='<html><head><style>'+view_style_editor.value+'</style></head>'+view_text_editor.value+'<script>'+view_script_editor.value+'tmp=document;function skryptuj(val){eval(val);};function wyswietl(nr){};wynik=function(src){window.top.main_run_show_output_help_frame.srcdoc=src;console.log=window.top.wynik;}</script></html>';"> wyświetl </button>

Jeśli generujesz cały kod na zasadzie sklejania stringów (a nie na obiektach), to wszystko się tu może zadziać np.

preview_frame.srcdoc='<html><head><style>'+view_style_editor.value+'</style>

tu wystarczy, że view_style_editor.value będzie zawierał jakieś głupoty i juz struktura HTMLa może być inna (lepsze podejście byłoby tworząc ten styl za pomocą document.createElement('style') czy używając CSSStyleSheet https://web.dev/constructable-stylesheets/ ). No chyba, że robisz jakąś walidację tych stringów wcześniej...

W tym kodzie/podejściu jest pełno tego typu rzeczy, które być może nie mają wpływu na działanie, ale jednak mogą mieć. Więc jeśli ci coś nie działa, a nie wiesz co, to chyba najlepszym podejściem będzie przepisanie tego w jakiś bardziej elegancki sposób. Może przy okazji znajdziesz rozwiązanie problemu, a jeśli nie znajdziesz, to przynajmniej wyeliminujesz prawdopodobne przyczyny.

Więc ja trochę załamuję ręce, bo nie dostrzegam, gdzie masz faktycznie błąd (więc pewnie nie pomogłem w rozwiązaniu kluczowego problemu), ale tu jest tyle do naprawy, że prościej byłoby to przepisać na nowo, ale już zachowując jakiś rygor w tym.

infinityhost napisał(a):

Witam. Mam problem z eval() które operuje na takim kodzie w iframe zad5pl_html
[...]
pierwsza funkcja pobiera zmienna prawidłowo.
trzecia funkcja kasuje pole div prawidłowo.
druga funkcja nie robi nic - jeśli dodam alert() wyświetla komunikat.

Ja to odpaliłem u siebie na Chrome i działa. Pierwszy przycisk normalnie pokazuje prompta z pytaniem o nazwę, jak kliknę "Zapisz" to się wsadza do <div>a, a jak kliknę "Kasuj" to się usuwa.

Chodzi Ci o to że na innych przeglądarkach nie działa?

PS: Sprawdziłem na Microsoft Edge, i też działa. Także moim zdaniem masz błąd gdzieś indziej.

@Riddle: @LukeJL Ale odpaliliście to w w iframe? W ogóle uruchomiliście to na tej stronie którą wskazałem? Tam wszystko działa poza tą jedną rzeczą. (zad5pl_html - jest bez znaczenia to pomocna informacja tylko do znalezienia wlasciwej zawartosci na stronie - zeby szybko na niej operowac.) Caly problem jest ze podobna funkcja czyszcząca działa bez problemu za to ta nadpisujaca juz nie. To sie chyba nie powinno dziac.

infinityhost napisał(a):

@Riddle: @LukeJL Ale odpaliliście to w w iframe? W ogóle uruchomiliście to na tej stronie którą wskazałem? Tam wszystko działa poza tą jedną rzeczą. (zad5pl_html - jest bez znaczenia to pomocna informacja tylko do znalezienia wlasciwej zawartosci na stronie - zeby szybko na niej operowac.) Caly problem jest ze podobna funkcja czyszcząca działa bez problemu za to ta nadpisujaca juz nie. To sie chyba nie powinno dziac.

No, to ja uruchomiłem na stronie i nie działa żaden z tych przycisków, dostaje:

VM504:1 Uncaught SyntaxError: Unexpected token '<'
    at HTMLButtonElement.onclick ((index):57:70)

dodatkowo, wrzuciłem sobie output Twojej strony do https://validator.w3.org/ i dostałem 281 błędów. Może któryś z tych błędów by Cię nakierował? Główny jaki się powtarza, to błąd ortograifczny, w CSS piszesz heigth zamiast height, masz też kilka zduplikowanych id, oraz elementy HTML umieszczone w niedozowolnych miejscach.

@infinityhost: A Twój problem jest taki, że próbujesz zrobić eval() na kodzie HTML, zamiast JS. eval() umie uruchomić tylko JS'a, a Ty robisz:

eval(view_text_editor.value)

a w view_text_editor.value siedzi Twój HTML, więc nie zrobisz na nim eval().

@Riddle: ostatnia prośba spróbuj jeszcze:

1. Uruchomić jeszcze raz przycisk "Funkcje" po lewej stronie - niech wyczysci srodowisko
2. wyczyść textarea HTML i Skrypt
3. wklej ten kod od @LukeJL
   Kopiuj

   <button>Pobranie</button><button>Zapisz</button><button>Kasowanie</button>
   
   <divx>dddd(usun x z divów bo nie wyswietla ich jak nie dodam x</divx>
   
   <script>
      let u=0;
      function pobierz(){ let i = prompt("Jaka nazwa?");return i;};
      function wyswietl(nowa){ document.querySelectorAll("DIV")[0].innerHTML=nowa;};
      function wyczysc(){document.querySelectorAll("DIV")[0].innerHTML="";};
   
      document.querySelectorAll("BUTTON")[0].setAttribute("onClick","u=pobierz()");
      document.querySelectorAll("BUTTON")[1].setAttribute("onClick","wyswietl(u);");
      document.querySelectorAll("BUTTON")[2].setAttribute("onClick","wyczysc()");
   </script>
   

   do okna HTML i kliknij Podgląd.

Klikałeś "Podgląd" albo "Uruchom"?

Riddle napisał(a):

@infinityhost: A Twój problem jest taki, że próbujesz zrobić eval() na kodzie HTML, zamiast JS. eval() umie uruchomić tylko JS'a, a Ty robisz:

Kopiuj

eval(view_text_editor.value)

a w view_text_editor.value siedzi Twój HTML, więc nie zrobisz na nim eval().

Nieeee, nie uruchamiam eval(view_text_editor.value) tylko eval(view_script_editor.value) coś pomyliłes (chyba ze poczatkowe okno ma taki wpis -to sie czysci jeszcze wszystkiego nie poprawilem).

infinityhost napisał(a):

Nieeee, nie uruchamiam eval(view_text_editor.value) tylko eval (view_script_editor.value) coś pomyliłes (chyba ze poczatkowe okno ma taki wpis -to sie czysci jeszcze wszystkiego nie poprawilem)

DOM Twojej strony:

Riddle napisał(a):

infinityhost napisał(a):

Nieeee, nie uruchamiam eval(view_text_editor.value) tylko eval (view_script_editor.value) coś pomyliłes (chyba ze poczatkowe okno ma taki wpis -to sie czysci jeszcze wszystkiego nie poprawilem)

DOM Twojej strony:

Nie , to są przyciski do operowania na środowisku, do dzialan na stronie uzywamy tych po prawej stronie. Te po lewej sluza do np. ustalania wyglądu wszystkich okien głownych w winodow.top - dzieki nim generuje cala strone i na niej operuje (przesuwam okna, ustalam style i potem kopiuje kod)

infinityhost napisał(a):

Nie , to są przyciski do operowania na środowisku, do dzialan na stronie uzywamy tych po prawej stronie. Te po lewej sluza do np. ustalania wyglądu wszystkich okien głownych w winodow.top - dzieki nim generuje cala strone i na niej operuje (przesuwam okna, ustalam style i potem kopiuje kod)

No ale to nadal nie zmienia faktu, że te przyciski robią eval() na HTML'u co nie może działać.

Już wiem czemu to działa - bo potem w skrypcie daje main_run_script_button.setAttribute("onClick","eval(main_run_text_area.value)"); - i to jest ostateczne działanie.

Ale to nas nie zbliża ani o krok do rozwiązania problemu.

@LukeJL: zrobiłem jak chciałeś z w skrypcie dodałem createElement i też na nim nie operuje. Jak chce uzyskać dostęp np. do nazwy przycisku czyli innerText to również nie ma problemu.

@infinityhost:

Jak się kręci w tej firmie szkoleniowej?
Uczysz że "syntax error" to się określa "nie działa" ?
Albo "nie działa bo wyskakuje jakiś alert" ?

"u=pobierz()" równoznaczne z "function { u=pobierz(); }" a to oznacza że to u jest zmienną lokalną i nie ma nic wspólnego z let u=0;

Wydaje mi się, że próbowałem z window.u zamiast let u; tak dałem windows.u i windows.top.u zamiast u i dalej nie działa. Ale chyba celujesz blisko. Ale to chyba dalej nie to.:(

Nawet mi się nie chce przegryzać, weź zrób minimalny przykład i wklej kod strony tu.

Kod HTML ```
<button>Pobranie</button><button>Zapisz</button><button>Kasowanie</button>

<divx>Text</divx>

Jak dam w funkcji przypisanie do div wartości z prompt to działa ale ja chcę to zrobić w ten sposób który napisałem. Przecież nie będę robił miliona działań w jednej funkcji. Może problem jest że całość jest uruchamiana w eval()?

To mi powiedz czego nie zrozumiałeś w moim poprzednim poście?
https://www.ibspan.waw.pl/~alex/test.htm zrobiłem wg własnych instrukcji i działa.

Zrobiłeś to tak jak pisałem od początku wczytales kod strony do iframe'a za pomocą srcdoc i uruchomiles wewnętrzna funkcję która robi eval() z parametrem będącym textarea.value z window.top?

Miałeś zrobić minimalny przykład.

@_13th_Dragon: będę w domu to wstawię teraz jestem na smartfonie i nie dam rady. Wiem, że nie czytałeś wątku od początku ale na pierwszej stronie (o 21:28)wytłumaczyłem maksymalnie prosto co próbuje osiągnąć. Prosiłem Cię na samym początku żebyś się zapoznał z tematem. Niemal wszystkie fragmenty kodu już wstawiłem ale zrobię to jeszcze raz w całości.

@_13th_Dragon: Masz kompletny kod, bez znaku mniej nic się nie uruchomi a jak już to nie przedstawi mojego problemu.

<html>
<body>
<textarea id="html_id"><button>Pobranie</button><button>Zapisz</button><button>Kasowanie</button>
<br><div>Text</div></textarea>
<textarea id="style_id"></textarea>
<textarea id="script_id">let u;function pobierz(){ let i = prompt("Jaka nazwa?");return i;};function wyswietl(n){document.querySelectorAll("DIV")[0].innerHTML=n;};function wyczysc(){document.querySelectorAll("DIV")[0].innerHTML="";};document.querySelectorAll("BUTTON")[2].setAttribute("onClick","wyczysc()");document.querySelectorAll("BUTTON")[0].setAttribute("onClick","u=pobierz()");document.querySelectorAll("BUTTON")[1].setAttribute("onClick","alert();wyswietl(u);alert();");</textarea>

<button onClick= "document.getElementById('iframe_id').srcdoc='<html><head><style>'+document.getElementById('style_id').value+'</style></head>'+document.getElementById('html_id').value+'<script>'+document.getElementById('script_id').value+'tmp=document;function skryptuj(val){eval(val);};function wyswietl(nr){};wynik=function(src){window.top.main_run_show_output_help_frame.srcdoc=src;console.log=window.top.wynik;}</script></html>';">Wpisz do iframe</button>

<iframe id="iframe_id"></iframe>
</body>
</html>```
Chociaż widzę teraz, że to eval to bardziej do konsoli mam ale tak czy inaczej drugi przycisk nie nadpisuje mi wartości w oknie.

Wielkie dzięki!
Trochę potestuje to Twoje rozwiązanie, bo chyba można na nim sporo i fajnie podziałać! xD

Dodałem konsolę za pomocą funkcji - dodałęm
Jakiś gościu dodał jeszcze od siebie tutaj Ci zacytuje bo może być przdatne

"But first of all you need to be sure, that your iframe has completely rendered. So you need to use a setTimeout in order to do that.
."
i
"and in your messed code above setDynamic must be called after your eval."
(bo tam w kodzie powinno być jeszcze funkcja skryptuj dodana do końca zawartosc skrypt_textarea.value która by robiła eval z wewnątrz ale to już banał nie warty wzmianki).

Działa dokładnie tak jak potrzebuję żeby działało!

Mimo wszystko jak daję w oknie z treścią html - iframeDoc.body.innerHTML wpis

<script>alert();</script>

to nie alertuje.
Żeby to działało poprawnie chyba trzeba dodać do wnętrza funkcji

let tmp=iframeDoc.documentElement.outerHTML;iframeDoc.write("");iframeDoc.write(tmp);

lub (co chyba lepiej działa bo przy document.write(); nadpisuje dwa razy)

let tmp=iframeDoc.documentElement.outerHTML;iframe.srcdoc="";iframe.srcdoc=tmp;

wtedy to ma ręce i nogi.

@_13th_Dragon:

function write_all(src){

if(src==0){
preview_frame.contentDocument.write(view_text_editor.value);
preview_frame.contentWindow.document.body.innerHTML=view_text_editor.value;

let z=document.createElement("script");
z.innerHTML=view_script_editor.value;

preview_frame.contentWindow.document.head.appendChild(document.createElement("style"));
preview_frame.contentWindow.document.head.childNodes[0].innerHTML=view_style_editor.value;
preview_frame.contentWindow.document.head.appendChild(z);

}else{preview_frame.contentDocument.write(view_text_editor.value);
preview_frame.contentWindow.document.body.innerHTML=view_text_editor.value;

let z=document.createElement("script");
z.innerHTML=view_script_editor.value+view_console_editor.value;

preview_frame.contentWindow.document.head.appendChild(document.createElement("style"));
preview_frame.contentWindow.document.head.childNodes[0].innerHTML=view_style_editor.value;
preview_frame.contentWindow.document.body.appendChild(z);
};}

preview_frame - jest to zmienna wskazująca na ramkę główną.
view_text_editor - pole textarea zawierające kod html.
view_style_editor - pole textarea zawierające kod css.
view_script_editor - pole textarea zawierające kod javascript.
view_console_editor - pole textarea zawierające kod javascript(ma być uruchamiane po wczytaniu już strony).

src - to jest parametr funkcji określający czy źródło ma być pobrane(czy jest to pole view_script_editor.value czy pole view_console_editor.value).

kod do uruchomienia w polu skryptu to

div=document.querySelectorAll("DIV")[3];ifr=document.createElement("IFRAME");
inp=document.createElement("INPUT");
but=document.createElement("BUTTON");
div.appendChild(ifr);div.appendChild(inp);div.appendChild(but);
but.innerText="koloruj";
function writes(tak){let z;if(tak=="tak"){z= "<style>html{background-color:white;color:red;font-size:20px;}</style>";}else{z="<style>html{background-color:black;color:white;font-size:20px;}</style>";};return z;};
function ask(){let tmp;if(prompt('kolorować?')=='tak'){tmp=writes('tak');}else{tmp=writes('nie');};
tmp+=inp.value;ifr.setAttribute('srcdoc',tmp);};but.setAttribute("onClick","ask()");

Jesli daję ten kod do pola "view_script_editor" to działa bez zarzutu. Jak daję do pola "view_console_editor" to nie działa. Jeśli zamiast tego kodu dam "alert()" to działa.

Jeśli pierwszy raz uruchamiam stronę i dam kod do "view_script_editor" to ładuje bezproblemowo (i znajduje funkcje ask() i writes() przypina ją do buttona) , jak pierwszy raz ją uruchomie i dodam do "view_console_editor" to tworzy elementy ale już nie obsługuje funkcji (writes() i ask() - buttonowi da się wtedy dodać zdarzenie alert() ale już nie ask()). Jak utworzę funkcję jako metode np. utworzonego przycisku i uruchomię ja za pomocą this to wtedy działa.

Jeszcze dodam fragment kodu z okna głównego

<html>
<body>
<textarea id="html_id"><div id="pierwszy_div_id" class="pierwszy"></div><div id="drugi_div_id" class="drugi"></div><div id="trzeci_div_id" class="trzeci"></div><div id="czwarty_div_id" class="czwarty"></div></textarea>
<textarea id="css_id"> </textarea>
<textarea id="script_id"></textarea>
<textarea id="console_id"></textarea>
<button onClick="write_all(1)"> uruchom </button>
<button onClick="write_all(0)"> wyświetl </button><br>
<iframe id="preview_frame_id"></iframe>
<script>
view_text_editor=document.getElementById("html_id");
view_style_editor=document.getElementById("css_id");
view_script_editor=document.getElementById("script_id");
view_console_editor=document.getElementById("console_id");
preview_frame=document.getElementById("preview_frame_id");
</script>
</body>
</html>

To jest jedna z ostatnich wersji, coś tam działa , próbowałem różnych rzeczy, zawsze blokuje na użyciu wiekszej funkcji kiedy uruchamiam write_all(1);(czyli przycisk "uruchom")

Sam przykład właśnie sprawdzałem umieszczony na pulpicie działa , ale na stronie już tak jak napisałem.
(właściwie to nie powinno na parametrze 1 czyli uruchom ładować całej strony tylko dodawać skrypt utworzony z okna konsoli albo robić eval()na jej zawartości ale tak czy inaczej jest problem).

Jak dam zamiast tamtej funkcji ask() coś takiego:

      but.ask=function(){let tmp;
          if(prompt('kolorować?')=='tak'){tmp=writes('tak');
      }else{
            tmp=writes('nie');};
      tmp+=inp.value;ifr.setAttribute('srcdoc',tmp);};

but.setAttribute("onClick","this.ask()");

działa prawidłowo.

Przy czym jeśli okno html, css i skryptu jest puste, to konsola się nie uruchamia.