3 Replies - 165 Views - Last Post: 02 July 2019 - 08:54 AM

#1 gart   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 15-June 18

Script tags inside of dynamically created iframes?

Posted 02 July 2019 - 07:50 AM

I'm trying to create a simple HTML editor. The basic idea is to allow me to try out ideas and see the changes as I type. It works okay so far but I'm having this issue now where if the dynamic content includes a script tag, the script never gets loaded and I'm really not sure why that is.

The whole thing consists of three pages.

The parent html document:

<html>
 <head>
  <title>Pagist</title>
 </head>
 <body>
  <iframe 
   height = "70%"
   width = "100%" 
   id = "input"
   src = "input.html">
  </iframe>
  <iframe 
   height = "75%"
   width = "100%" 
   id = "output"
   src = "output.html">
  </iframe>
 </body>
</html>



The input page looks like this:

<html>
 <head>
  <style>
html *
{
 font-size: 35px;
 font-family: sans-serif
}
  </style>
  <script>
function dom(tag, root)
{
 if(!root)
  root = this
 return root.document.getElementById(tag)
}

let font_size = 35
let font_increment = 3
let font_minimum = 10
function zoom(bigger)
{
 let editor = dom("editor")
 if(bigger)
  font_size += font_increment
 else if(font_size - font_increment >= font_minimum)
  font_size -= font_increment
 editor.style["font-size"] = font_size + "px"
}

function toggle()
{
 let button = dom("state")
 toggle.state = !toggle.state
 if(toggle.state)
 {
  button.innerHTML = "Pause"
  update()
 }
 else
  button.innerHTML = "Play"
}

toggle.state = true

function update()
{
 if(toggle.state == false)
  return
 let editor = dom("editor")
 let output = dom("output", parent)
/*
 https://stackoverflow.com/questions/8240101/set-content-of-iframe
*/
 let header = "data:text/html;charset=utf-8,"
 output.src = header + escape(editor.value)
}
  </script>
 </head>
 <body onload = "update()">
 <button 
  id = "state"
  onclick = "toggle()" 
 >
Pause 
 </button>
&nbsp
 <button onclick = "zoom(true)">
+ 
 </button>
&nbsp
 <button onclick = "zoom(false)">
- 
 </button>
<br>
  <textarea 
   id = "editor"
   oninput = "update()" 
   style = "font-weight:bold; width:100%; height:100%;"
   cols = "100%"
  ></textarea>
 </body>  
</html>



The output page is simply blank of course.

Also if anyone knows of any better options than this home-spun project I'd love to hear about it (does need to be able to be run from a local file though).

Is This A Good Question/Topic? 0
  • +

Replies To: Script tags inside of dynamically created iframes?

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4238
  • View blog
  • Posts: 13,436
  • Joined: 08-June 10

Re: Script tags inside of dynamically created iframes?

Posted 02 July 2019 - 08:32 AM

Have you checked for error messages in the error console?
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4238
  • View blog
  • Posts: 13,436
  • Joined: 08-June 10

Re: Script tags inside of dynamically created iframes?

Posted 02 July 2019 - 08:46 AM

I doubt that .style["font-size"] would work since the correct addressing is .style.fontSize. (cf. https://developer.mo...LElement/style)
Was This Post Helpful? 0
  • +
  • -

#4 gart   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 15-June 18

Re: Script tags inside of dynamically created iframes?

Posted 02 July 2019 - 08:54 AM

Nothing, just no load. I did consider defining a "require" function from the parent document but that would be sort of a hack I think. Rather be able to use script tags inside the output frame. Maybe it's because the browser assumes that since the output frame has already been loaded it doesn't need to honor new script requests? I don't know.

As to the "font-size" thing it does work though I'm not totally sure if that's 100% portable.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1