We Keep Coding

javascript in iframe document.write overwrites parents document

I want to load HTML as string into an iframe via Javascript.
like this:
$('#iframe1').contents().find('html').html("<h1>This is an iframe</h1>");
this worked great until I found out, that inside this HTML upcomming Javascript like document.write are writing to the wrong document -> the parent!
Here is a Plunker to show it:
http://plnkr.co/edit/YQAqqSDCVKnP3uhLj4lF?p=preview
if I load the same HTML to the iframe via src as external document, the document.write goes to the iframe (and not to the parent), which is what i was expecting.
Are there some insights out there?
How can I tell the browser to correctly create the iframes document scope before it executes its Javascript?
PS: Its meant to be for preview purposes, so i inject HTML-Code of a (trusted!) source, but within that code, document.write is allowed.

Ok. srcdoc is helpfull here.
$('#iframe1').attr({srcdoc:intrusiveHTML});
I updated the Plunker.
With srcdoc, Javascript won't slip up with the document scope.
It won't work in IE (http://caniuse.com/#feat=iframe-srcdoc), so it might help to use Polyfill additionally:
https://github.com/jugglinmike/srcdoc-polyfill
But I did not test that yet.

Instead of using document.write, use document.getElementById('iframe1').contentWindow.document.write.
Because when you point document it will take main window document, so we need to indicate which iframe doument need to be used.

Run textarea to iframe

I'm trying to run an HTML, CSS and JavaScript code written by the user in a textarea on an iframe in the page, something like jsFiddle. I tried using this for the HTML and CSS:
$(".runBtn").on("click", function(){
$(".Result > iframe").contents().find('body').html("<style>" + $('.CSS > textarea').val() + '</style>' + $(".HTML > textarea").val());})
But it doesn't seem to work. And I still haven't got a clue on how to run the javascript on it.

Comunication with iframe is tricky and You should not be using it like that. There is API for communication with iframe no mater it is from site to iframe or iframe to site. I didn't use it for a long time so i can't give you some good examples but You have everything You need on 1
it goes down to that you send a message trough that API to iframe with some payload, and inside of him You have event listener to that message event. when you receive it, render html from payload.

$("runBtn") is looking for a elements that are a tag <runBtn> that most likely doesn't exist. If element has an id you need a proper id prefix
$("#runBtn")
As for your html you haven't created a proper <style> tag. Also not clear where the textarea is in relation to iframe (inside iframe or outside). If it is inside you need to use find() within iframe contents to access it

Load a html page in a div by clicking an image

I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.

I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.

Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.

Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).

How to load javascript function on page load ?

I have used javascript to generate 2D bar-graphs in a HTML page.
When i am trying to load this HTML page containing bar-graph in to a div tag of some other HTML page using jQuery .load() function bar-graph (i.e, scripts) are not loading.
Please help on this issue.
For example i have bar-graph in xyz.html.
I am trying to load xyz.html in abc.html div tag using jquery .load() function.
Bar-graphs are missing.
Hoping for a reply, thanks for help in advance.

You should use iframe and load the html,I think,we can not directly load html in a div.

Are you generating the xyz.html output your self or is it created by some 3rd-party app?
If you're generating bar graphs your self, I recommend to generate just the content of body, not the whole site. Then the loading into abc.html should work correctly.
If they are not generated by you, use mhasan advice, but you shouldn't get the whole content oh html tag but only content of body tag.
BTW: have you an example of the script (js and html) somewhere to look at?

In jQuery you can use the
$(document).ready(function(){
});
to load the script when the page is ready. so you better put the chart generation script
inside this function in xyz.html (as said in your example).
You can also use this document.ready in your abc.html also to load the div.

Alternative position of script that needs to come after specific HTML element?

Sorry I couldn't articulate my question accurately.
I have a jQuery script that needs to be placed below the HTML element it is applied to and not in the head. IE 6 and IE 7 are generating operation aborted message since the script is not a directly child of Body tag. This seems to be a well known bug on IE.
I do not have the privilege to keep the script tag as a direct child of Body tag. Either it should be inside tag or it should be in the head. If I have it in the head, it obviously doesn't trigger since it should be below the HTML element it is applied to.
What are my options in this case?
Thanks!

Put it in the head, and move your code inside a document.ready handler, like this:
$(document).ready(function(){
// your code here
});
This way, your code will only run after the full HTML has been parsed.

You can write the code within head...Just need to write it inside the document ready block, so that it gets executed only after your DOM is ready..
$(document).ready(function(){.....your code......}
Hope that helps. Thank you.