I am writing a preview function to let user preview the HTML file they uploaded and do some minor editing. The HTML file will contain no Javascript and no external CSS. All CSS are either inside style tag or inline. Images, on the other hand, will always be external as we don't provide space for storing images.
iFrame is not a good solution, because:
The preview is before actually saving the content, so I cannot provide an URL for iFrame to load the page.
It is difficult to touch the element inside iFrame. As the user will be doing minor update in another text box showing the plain HTML, I will need to update the elements inside frequently.
However, if I just insert content into an <div> the repeated <html>, <head> and <body>tag will crash the page.
So, is there a way I can preview the HTML without iFrame?
if you dont want to have the main app to affect the styling of the preview, you need to use iframe. have you see iframe's content window? https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow. this might be the answer you are looking for. So basically here you try to access the DOM of your iframe. give it a try!
preview = getYourIframeDom();
code = getYourHtmlCodeHere();
preview.contentWindow.document.open("text/html","replace");
preview.contentWindow.document.write(code);
preview.contentWindow.document.close();
Related
So if it's possible I'd like to echo (or otherwise copy) some text from inside one iframe on a custom page i'm making into another section/div on the page this iframe is on.
Example:
<div 1>
<iframe>
<div inside frame>
Text i would like to echo/copy
</div>
</iframe>
</div>
<div 2>
(another iframe could go here if needed but i was firstly trying to do it without another one.)
Text from the iframe above
</div>
I may not have that 100% right but i'd like to do that and in the second div i'll have a class that makes the text scroll.
The use for this is a twitch stream project i'm working on. This is taking text that shows 'now playing' from a page and making it transparent via having the background color 'chroma key green' and displaying it on the stream.
The other option is if I could have some sort of script to send the text from this div into a text file as it updates and then i could add the text file to the stream instead.
note: I don't mind using php or java/jquery. I was trying to keep the file simple to use and edit most of all. I just wanted to note i'm not as experienced in java and php. I want to do this the simplest way possible.
Thanks!
(I don't want to include all my code, but it's fairly straight forward, all help is appreciated.)
If the parent page and the page inside the iframe are hosted on the same domain, you can access the contents of the iframe directly with something like this on the parent page:
var iframe = document.getElementById('id-of-iframe');
var element = iframe.documentWindow.getElementById('id-of-element-inside-iframe');
For security reasons, this will fail if the pages are not hosted on the same domain.
If the pages are hosted on different domains, but you have access to both (read: you can change the HTML output from the server on both pages), you have another option called cross-document messaging.
This is a bit more complex, and involves scripts on the parent and child page to communicate with each other and send data back and forth.
On the parent page, you would have something like:
window.attachEventListener('onmessage', function (...) {
// Listen for messages from the child page
}, false);
And then in the child page, you would package up the data and send it to the parent with a call like this:
parent.postMessage(...);
Obviously, there are details I've left out here (...), but this is the general idea.
If you don't have access to both the parent and child page, there is no way to achieve what you're asking. Allowing any page to access any other page inside an iframe would be a major security problem. (Imagine if I placed a full-page iframe on my site, loaded Gmail in it, then setup a script to watch the value of the password field.)
I have HTML content (mostly e-mails) that I would like to display in an archive. Seeing as some of these records contain their own styles, images, and headers, they need to be displayed independently and confined to its container so as not to interfere with the page displaying it. I immediately thought of an iframe.
I have two ways I can do this, both are somewhat indirect. 1) I can draw an iframe that points to about:blank and use Javascript to draw the content into the iframe after the page loads. 2) I can create a secondary PHP page that returns only the content of the e-mail and point the iframe to it as the src attribute. These solutions are simple enough, but I was wondering if there is a more direct way.
I found solutions like these, but they suggest using options 1 or 2 above. The point of this question is: "Is there a more direct way to preload HTML content directly into an iframe than to rely on Javascript or a secondary page?"
Html code as IFRAME source rather than a URL
Specifying content of an iframe instead of the src to a page
I am not sure how much more "direct" you can get than to specify a page in the src attribute of the iframe.
You already link to the only answer that actually works in your question that does not include using a src page or using EMCAScript to draw the iframe content. Remember thought that data urls are still limited in the number of bytes of data they can display in most browsers because there are limits to the length of the data url itself.
I would really suggest that you use the src attribute with a seperate backend script as that will decouple and increase the maintainability of your code as you can develop the scripts responsible for the page itself seperatly from those that show the iframe content.
My understanding of the iFrame is that the content inside is exactly what is included in the src. I've seen numerous widgets like Facebook etc that use an iFrame.
When I try using an iFrame, I have an HTML file with only a div and some content inside, no head, body, etc. Just the content in HTML. But the iFrame always loads the entire page and ends up giving me a recursive iFrame within an iFrame.
I don't see how this is since my HTML file that is referenced in the iFrame is just content and nothing else. I'm not including a header, footer but all that gets displayed anyway.
I've seen where people are talking about scrolling the iFrame to a certain section and even using the div's id in the src and setting the scrolling=no. This works, but my iFrame content will reload based on user input and once it reloads it returns to the top-left portion of the page inside the iFrame.
This doesn't make any sense. Maybe this is supposed to be a widget or something?
Edit for SD to show some formatted code:
#Surreal Dreams
That's the strange thing. I'm using web2py so it might be something inherent in the backend that's causing that. The html file literally is a div wrapper with some elements inside. But I think the web2py is adding the header in there even though I'm not extending any kind of layout. I eventually did get it to work correctly by referencing the same html file saved offsite at another url. There it displayed properly without web2py interfering with the html structure.
What was happening before, I had code like this:
{{extend 'layout.html'}}
<div class="wrapper">
<page content>
<aside id="iFrame wrapper">
<iframe src="/rates.html"></iframe>
</aside>
</div>
And that's the basic structure of the web2py page where inside layout you have all your headers, footers, etc. Well what was happening is that it would generate the entire page, and where you get to the iFrame, it generates the page again inside that iFrame, and then on down to the iFrame again, which continues to infinity rendering the page inside each iFrame's page.
An iframe will always load an entire Web page, referenced in your iframe's src attribute. Even if your file only contains a div, I believe the browser considers it a full page and automatically adds a head and body.
"I've seen where people are talking about scrolling the iFrame to a certain section" => right, once the page in the iframe is loaded, you can use JavaScript to access and manipulate its DOM:
var myIframe = parent.document.getElementById("myIframe");
var window = myIframe.contentWindow;
I am having a header which it will be uniform in all the pages. I want to make it generic. So I want to include common header in every HTML Page.
When i checked for HTML includes i cameup with SSI which needs a server. My Requirement is I want to include HTML file in another WITHOUT a server.
The way I would do it would be to make a "hanger" div with a class of .header. Then put a <p> inside the div to put alt text into. Then in your main css stylesheet apply your header image as a background image, and negatively indent the text.
Example
.hanger {background-image:url(header.png); text-indent:-1000px;}
To resize the header all you would do is put a width and height on div.hanger.
Does this help?
I've never heard of including html in another html file. I think what you can trying to do can be accomplished using an iframe.
example: header.html
This later question got an answer that works with files on disk provided you are using firefox.
Chrome gives a cross site scripting error
You could have a <div> for the header, I will call it <div id="header">.
Using jQuery we could say something like: $('#header').load(---html file---);. Aside from the pain it might be to include the JS file in all pages, it will allow you to make changes to the header globally throughout your application.
My application lets users edit documents. The editor widget, unsurprisingly, represents user documents as HTML.
I need to redisplay the documents outside the editor, but inside my site's layout. Documents need to appear in the exact same style they are presented in the editor, unaffected by my site's stylesheet. I could use the editor in read only mode, with all its buttons hidden, but I still will have scrollbar and border style issues to resolve.
I have identified the CSS file that the editor uses. How can I effectively configure a div element (the one that will contain the document) to (1) disregard all current styling, and (2) load a css file to apply to its content?
You have two options:
1.) Reset all styles on the div containing your document, and make sure your document's styles are prioritized over the reset. This could get messy.
2.) Use an iframe and load the document and styles inside the iframe.
<iframe src=".../documents/myDocument.html"></iframe>
Where "myDocument.html" is an html document containing the document and styles (treat the document html page as any other html page, and make sure it has proper head and body tags, etc.
Other options:
1.) Open the document html page inside another window.
<a href=".../document/myDocument.html" target="_blank" >Open Document</a>
2.) Render the document as a pdf, and load it into the page using a pdf viewer. (you would want to keep a backup of the original document, as the conversion back would be terrible, I presume).
Yes and no. If you want to use a div, you will want to use a stylesheet with styles defined to "reset" the css for that div. That would basically undo your site's styles, and then any new style selectors should be limited to within that div itself.
Otherwise, I would suggest using something like an iframe where you can render a truly independent document.