Inject HTML to iframe problem

Using JavaScript with Hype
1

Hi Guys,

I'm using an iframe in an HTML5 element to display the results of html code typed in a span (contained in a seperate HTML5 element).

I intend to have the user

  1. Type some html
  2. Click a submit button
  3. The HTML code is rendered in another panel (my iframe).

I'm using javascript to inject the html into the iframe - and it works to a certain degree.
The issue I come into is that the iframe ignores all of my header tags.

This is the javascript Im running on the button click event :-

var iFrame = hypeDocument.getElementById('v_input').children[0];
var iFrameMain = hypeDocument.getElementById('v_render').children[0];

var iFrameDoc = iFrame.contentDocument||iFrame.contentWindow.document;
var iFrameMainDoc = iFrameMain.contentDocument||iFrameMain.contentWindow.document;

var iFrameRender = iFrameMainDoc.getElementById('myFrame');
iFrameRenderDoc = iFrameRender.contentWindow.document||iFrameRender.contentDocument;

var input = iFrameDoc.getElementById('inputter');

var code = input.innerText;

iFrameRenderDoc.open();
iFrameRenderDoc.writeln(code);
iFrameRenderDoc.close();

Apologies for the poorly formatted code...

So the HTML I'm currently trying to inject is simple...

> <html>
> <head>
> <title> This is a title </title>
> </head>
> <body bgcolor="blue" text="red">
> <p>This is a body</p>
> </body>
> </html>

As I say, the iframe will render my HTML - it just ignores the header tags.

Any ideas?

2

Just looking at this quickly.

Shouldn't this be

var code = input.innerHTML;

Because you're dealing with HTML and not plain text :wink:

D

1 Like
3

OK. Had a longer look and here is a document that populates an iFrame with whatever is inputted into the textarea. If it’s not inside a <head></head> tag or a <body></body> tag then it won’t put it in the Iframe. Also I have some code to change the background color :smile:

Hope this helps!

D

populate_Iframe.zip (18.8 KB)

4

There is a little trick I found that will render the html string into html for the src of an iFrame.

data:text/html

Usage:

	var htmlInput = hypeDocument.getElementById("htmlInput");
	var  htmlWidget = hypeDocument.getElementById("render").children[0];
	 
	var htmlInputValue = htmlInput.value; 	 
	 //$(htmlRect).attr("src", "data:text/html,"  + htmlInputValue); //---IF YOU WANT TO USE JQUERY.
	 
 htmlWidget.setAttribute("src", "data:text/html,"  + htmlInputValue);

Tested in : Safari,Chrome,Firefox.

(It will also work if you have an iframe in a rectangle instead of a widget)

iFrameHTMLv2.hypetemplate.zip (64.3 KB)

5

Small update… :smile:

6

Thanks for the reply guys, I really appreciate it.

DBear, thanks for the sample, innerText vs innerHTML doesn’t really seem to matter in this scenario.
Although it seems you’re getting the same results as I am - All my html will work and render, except for anything inside head tags.
I can’t look at your sample until I can get on my mac on monday, so I’ll give feedback when I have.

MarkHunte, I really like your suggestion - I was trying to find a way to set my html as the src of an iframe at one stage, I guessed it might work if I could figure out how. Looks like you’ve cracked it for me.
As I said before, I can’t test/check your sample until I get at the mac on Monday.

Many thanks to both of you - I appreciate it a LOT

1 Like
7

Hi guys - small update.

Both your solutions worked - I really liked both solutions better than how I was handling things.

The thing is - my solution also works…

The code I was testing - as you can see above, has title tags - my HTML was copy/pasted straight from a tutorial for kids (an old one at that).
The title tags have been my issue all along - If I ditch those in any of our projects - everything works, I was expecting them to run from a CSS I’ve written - not realising <title> sets the page title in my window, not on the actual page (woops).

Once again, thanks for the help - you guys are awesome.
And I apologize for my own silliness.

I hope these samples serve to help someone else in the future.