I have such code :
<iframe id="document_viewer" src="<TMPL_VAR docviewer_url>"></iframe>
The variable is PHP URL with pdf converted to text and embed in perl generated HTML using that iframe.
For SEO reasons i need to make it visible in page source , like it would regular text. Help will be truly appreciated.
something like this:
<script>
$('#buttonID').click(function(){
var value = $('#document_viewer').contents().find('body').html();
$("#divID").load(value);
});
</script>
Related
I am creating a templates application where users can write any HTML/CSS code inside a textarea (E.G. a full html page pasted on a textarea). These users are mostly familiar with html and css so we have not yet implemented markdown. One important feature that we would like to add is the ability to preview the html in the textarea before submition. I have thought of ways that these can be done, but I am not sure which would be correct and most maintainable.
Preview the html inside a div in the same page - the problem I can see here is the existing CSS style might interfere with the CSS styles the user typed in the textarea. Furthermore, if the user writes body tag in the textarea, there will be another body tag inside the existing body tag of the actual page, so the html might become malformed.
Preview the html on a separate window - the problem is I do not have much control on this (if the user uses a poppup blocker, for example)
Preview the html on a separate tab - the problem is the user might be confused (E.G. closes the whole browser, thinking that it opens in a new window)
Preview the html on an iframe - this is doable, but will require me to create an additional .html file just for previewing
Preview the html on a modal - this is doable, but I am not sure if modal bodies will accept toplevel tags like title or body
Can anyone help me? Which of these potential solutions are best? Or is there a better solution?
I would use an iframe. It can run a new body and html inside of it. So if someone for example styled the body in it, it wouldn't effect the page its on. Here I wrote the code for you. Give it a shot, do some html coding in the text area and click "run"
<p>type some HTML/CSS code in here:</p>
<textarea type="text" rows="15" cols="40"id="myText"></textarea>
<p>Your HTML output</p>
<iframe id="output" srcdoc="">
</iframe>
<p>Click the button to preview your code</p>
<button onclick="myFunction()">run</button>
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("output").srcdoc = "<!doctype html> <html>" + x + "</html>";
}
</script>
Have you investigated iframe's srcdoc attribute? It allows you to have a string which is a complete document without needing to create a separate file. Of course you'd have to do some escaping or something to deal with the quotes.
Here's a trivial example:
<iframe srcdoc="
<!doctype html>
<html>
<head>
</head>
<body>
hello
</body>
</html>">
</iframe>
Have a look at https://codemirror.net/
It is opensource and will give you a complete CodeEditor out of thej box.
If not:
If you want to show HTML markup in a textarea, you should escape all
‘<’ characters with <. For consistency’s sake, you may also
escape ‘>’ characters with >.
I have a JSON object that looks like the following:
id:
text: <h1>This is my text</h1> <p> I want to include HTML
and reflect those tags on the page. </p>
I'm using Angular2's HTTP_PROVIDER to read the data from the JSON.
In my HTML template, I am displaying the JSON.dataString on the webpage. How do I reflect the HTML tags on the webpage, currently the tags are displayed as plain text.
<p>{{jsonObject.text}}</p>
Is there a way to read in those HTML tags that are included in the JSON objects, and have them reflected on the webpage?
Something like:
<div [innerHTML]="jsonObject.text"></div>
Should display the text object as raw HTML. Be careful about XSS injection when you do something like this.
More detail at this question.
You may try to do it like this:
function textHtml(input) {
var el = document.createElement("textarea");
el.innerHTML = input;
return el.value;
}
And then use this function to get text with tags
I don't use Angular but do something like that.
<p id="myId"></p>
<script>
document.getElementById("myId").appendChild(jsonObject.text);
</script>
I did not test it.
Is there a way to include the content of one HTTP request (containing either text/html or text/plain) in another HTML file? Of course this can be done via AJAX or on the server side, but I'm interested in a pure browser HTML way. Perhaps using a <link> tag, or some HTML5 method I'm not familiar with?
For example:
index.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>This is my text loaded from the original document</p>
<p>This is text I want to load from another file: <span id="other"><!-- link other resource here --></p></span>
</body>
</html>
otherResource.html:
<p>This is from another resource</p>
You can try to use an iframe.
<iframe src="page.html" width="300" height="300"></iframe>
If you are thinking about including text from another page, such as a footer or header, and just trying to find a way to include that, you might try a template engine.
Template Information: http://www.creativebloq.com/web-design/templating-engines-9134396
For example with EmbedJS from the link above:
new EJS({ url: "template.ejs" }).render({ name: "Jack" });
would allow you to include a template in a file called template.ejs.
Another option is to use a tool, such as Dreamweaver to accomplish it.
Finally you could do it with a script before you put the html on the server.
Is there a way to use pure html-code to display inside a frame instead of having to link to a specific URL/file?
For example:
NOT like this
<iframe src="left.html" name="left"></iframe>
but like this
<iframe src="here goes the html code" name="thank you SO"></iframe>
maybe you could inject HTML into the iFrame/Frame like described in this article:Injecting HTML into an IFrame by Michael Mahemoff.
Something like this:
var content = "<html><body><b>Hello World!</b></body></html>";
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var frameDoc = iframe.document;
if(iframe.contentWindow)
frameDoc = iframe.contentWindow.document; // IE
// Write into iframe
frameDoc.open();
frameDoc.writeln(content);
frameDoc.close();
HTH,
--hennson
In HTML5 there appears to be a way to do this:
<iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
See here, supposedly this is the purpose of the new html5 srcdoc attribute.
According to the MDN, it appears only chrome will honor the srcdoc attribute at this time.
I wasn't able to get this attribute to work, so it's probably not a viable option at this time. As others suggested, using a div is probably a better solution.
I think that you cannot do this. Maybe you can try with a DIV an modify the content with javascript with innerHTML?
<div id='A' onclick="javascript:document.getElementById('A').innerHTML = 'Another content'">
Click me
<div>
srcdoc attribute of iframe is the simple method...
<iframe srcdoc="Your text goes here..."></iframe>
I'm currently working on a form which includes some file inputs to upload pictures. There is an onchange() event for those inputs that submits the pictures to an iframe, then dynamically loads the uploaded pictures into the form, with fields to be modified for them (like name and geo-localization).
Since I can't nest forms, the file_input is also contained in an iframe. In the end I use an iframe inside of another iframe. So I have something like this:
<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>
and the HTML loaded into the iframe is something like (excluding the html, head and body tags)
<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>
This works great, except for the fact that it takes a couple seconds to load the first iframe, so the file input does not load with the rest of the page. This is not visually ideal. I could solve it if I could specify the iframe content without needing to load another page (specified by file_input_url in the first iframe).
Is there a way to specify the iframe content in the same document, or can it only be specified with the src attribute, requiring the load of another page?
You can .write() the content into the iframe document. Example:
<iframe id="FileFrame" src="about:blank"></iframe>
<script type="text/javascript">
var doc = document.getElementById('FileFrame').contentWindow.document;
doc.open();
doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
doc.close();
</script>
iframe now supports srcdoc which can be used to specify the HTML content of the page to show in the inline frame.
You can use data: URL in the src:
var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);
<iframe></iframe>
Difference between srcdoc=“…” and src=“data:text/html,…” in an iframe.
Convert HTML to data:text/html link using JavaScript.
In combination with what Guffa described, you could use the technique described in
Explanation of <script type = "text/template"> ... </script> to store the HTML document in a special script element (see the link for an explanation on how this works). That's a lot easier than storing the HTML document in a string.