We Keep Coding

Iframe cross-origin issue when using srcdoc

I need to display an input from user that is html, I don't want user to be able to use script here so i'm using the sandbox mode of iframe to have content without script.
<iframe class="frame"
srcdoc="<h1>title</h1><p>content1</p><p>content2</p>"
sandbox=""
style="width:100%;border:none;overflow:hidden;">
</iframe>
The problem is that I would like to be able to resize this frame to match the height of it's content with the bellow function but I can't access to iFrame.contentWindow.document due to cross-origin.
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
Is there a way to solve this ?

Finally I solved the issue. The problem was coming from the sandbox mode that is restricting everything so I needed to allow the javascript from same origin to be able to access it from my page :
<iframe class="frame"
srcdoc="<h1>title</h1><p>content1</p><p>content2</p>"
sandbox="allow-same-origin"
style="width:100%;border:none;overflow:hidden;">
</iframe>

Load website in first Iframe and its front end code in second Iframe

Just for the sake of learning Im asking this question.
I'm using 2 iframes
lets suppose I load a random website in Iframe1 Is it possible that its front end code is displayed in the 2nd Iframe dynamically/automatically.
Im talking about the code you see once you press CTRL+U on any webpage.
Please help

Loading any sites to iFrame
You can do it but not for all sites, cause some sites like google and stackoverflow blocks their loading to frames.
Getting any site content
You can`t do it, you can do it only if you iframe domain are the same as your site domain (Here is the description of policy same origin policy).
But
You can do some hacks, here is
solutions
Also here is fiddle that illustrate same origin policy exception. Use console to see it.
fiddle
Fiddle code
<iframe name="site_frame" id="site_frame" src="http://iherb.com">
</iframe>
<iframe id="code_frame">
<textarea id="code"></textarea>
</iframe>
document.getElementById('site_frame').onload = function () {
console.log("Frame loaded!");
var siteFrameDoc = getIFrameDocument(document.getElementById('site_frame')),
siteFrameHtml = siteFrameDoc.getElementByTagName('html');
wrapper = document.createElement('div');
wrapper.appendChild(siteFrameHtml.cloneNode(true));
var codeFrameDoc = getIFrameDocument(document.getElementById('code_frame'));
var textarea = codeFrameDoc.getElementById("code");
console.log(textarea);
textarea.value = wrapper.innerHtml;
};
function getIFrameDocument(iframe) {
return iframe.contentDocument || iframe.contentWindow.document;
}

Resetting CSS properties in bookmarklet

I'm trying to attach new <div> element with some content via bookmarklet and add some inline CSS.
The problem is that the CSS from the main page usually affects this div too.
What would be preferred approach to ensure that my styles from bookmarklet are always more important that the ones from any parent page?
The most trustworthy solution would be to set all possible CSS properties for each element inside the div. Is this wise? Where can I get the list?
I've found cleanstate.css which may do the reset.
Maybe some js solution would work better? Eg. detect which styles has been aplied by the main page, and reset them to default values? I'll have jQuery available in this bookmarklet anyways.

The reliable solution would be iframe.
You can create it dynamically and assign content using 'javascript:' protocol in src tag.
var iframe = document.createElement('iframe');
iframe.src = "javascript:'<div> Yours Content </div>'";
document.body.appendChild(iframe);
Or you can insert empty iframe, wait it to be loaded and modify iframe document as required. For example:
var iframe = document.createElement('iframe');
iframe.src = 'about:blank';
document.body.appendChild( iframe );
iframe.onload = function() {
iframe.contentWindow.document.body.innerHTML = '<div> Yours content </div>';
};
Alternatively, you can create separate .html page and insert it as iframe. <iframe src="http://example.com">Although, you will need to host page somewhere and document won't be able to access parent page without additional scripting. ( .postMessage() )

Creating iframe by javascript

I have a main page that include a javascript that was creating an iframe dynamically same below:
<script>
document.domain = "mydomain.com"
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
// creating other element in ifram dynamically
</script>
But in IE I kept receiving a security warning because of document.domain = "mydomain.com" (I need document.domain and I can not remove it).
I found a solution for IE8. this is the solution :
var u = 'javascript:(function(){document.open();document.domain="mydomain.com";document.close();})()';
iframe.src = u;
But it does not work on IE6. Is there any solution for my problem?
Note: I want to create other element in iframe by script and I want to load the content of iframe by src.

Create the iFrame using innerHTML.
Write the full HTML for the iFrame including the SRC attribute. Then find your element and set innerHTML to the string with the iFrame source.

Javascript: Can I access source of the file that is loaded in the hidden iframe

I have found this code for putting hidden iframe into my html and loading url into it:
var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { i.parentNode.removeChild(i); };
i.src = 'http://www.google.com';
document.body.appendChild(i);
And I would like to ask, can I access in javascript the source code of the google.com loaded in this iframe, please?

The security features of an iframe will prevent you from accessing the source code inside the iframe using JavaScript. If you want to "screen scrape" you should do two things...
1) Check that it's okay for you to use the data you are scraping.
2) Use a server-side script to load and parse the page.

If the page in the iframe is hosted on the same hostname as the "parent" page, you could access the DOM of the child page from the parent page using JavaScript.
If the childpage is at another hostname, the security features of JS will prevent that.

http://www.dyn-web.com/tutorials/iframes/ - Try this one it helps
Joe AWungshi