In my application I am loading external markup inside a div on my page. But sometimes the external content messes up the styling of my page.
The application gives a list of user's email from gmail and on clicking on an email it's loaded in the div. But sometimes the email's styling affects the styling of my whole page. Is there a way I can avoid that ?
I don't want to remove all the html tags from external content as I want to keep the original styling of email.
Related
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();
In my application I have used CKEditor text editor to store large data.
That data may come from another html page by copying content from any web page.
When doing above scenario,
if client missed any to copy properly ended html tags from that web page, they copied incomplete html content. When client paste it inside CKEditor, it showing good.
But If I display whole content without CKEditor,
Its leading to following issues,
Page collapse , because if client copied partical (in completed content from other web page)
CSS class override
Please give solution for that.
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;
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.
I want to create a static Facebook page, which should include some images and text. Are there any restrictions to what I can use? Ideally I'd simply thrown in my HTML markup, with images , styles and fonts hosted on another domain and be done with it.
If it's just images and text there won't be any problem but be aware that Facebook saves to cache the styles if you use the <link> tag and you won't see the changes you make on it right away.