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>
Related
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>
What are differences and consequences (both good and bad) of using either data-src or src attribute of img tag? Can I achieve the same results using both? If so, when should be used each of them?
The attributes src and data-src have nothing in common, except that they are both allowed by HTML5 CR and they both contain the letters src. Everything else is different.
The src attribute is defined in HTML specs, and it has a functional meaning.
The data-src attribute is just one of the infinite set of data-* attributes, which have no defined meaning but can be used to include invisible data in an element, for use in scripting (or styling).
If you want the image to load and display a particular image, then use .src to load that image URL.
If you want a piece of meta data (on any tag) that can contain a URL, then use data-src or any data-xxx that you want to select.
MDN documentation on data-xxxx attributes: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
Example of src on an image tag where the image loads the JPEG for you and displays it:
<img id="myImage" src="http://mydomain.com/foo.jpg">
<script>
var imageUrl = document.getElementById("myImage").src;
</script>
Example of 'data-src' on a non-image tag where the image is not loaded yet - it's just a piece of meta data on the div tag:
<div id="myDiv" data-src="http://mydomain.com/foo.jpg">
<script>
// in all browsers
var imageUrl = document.getElementById("myDiv").getAttribute("data-src");
// or in modern browsers
var imageUrl = document.getElementById("myDiv").dataset.src;
</script>
Example of data-src on an image tag used as a place to store the URL of an alternate image:
<img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg">
<script>
var item = document.getElementById("myImage");
// switch the image to the URL specified in data-src
item.src = item.dataset.src;
</script>
The first <img /> is invalid - src is a required attribute. data-src is an attribute than can be leveraged by, say, JavaScript, but has no presentational meaning.
src will render the value immediately and it’s the default for images, videos using a single source and iframes.
data-src is used when lazy loading to prevent the default image from loading when the page loads. Most lazy loading libraries will use intersection observer and copy the data-src value to src when it’s time to load the image.
As the accepted answer says. If you're looking for the usage of data-src lazysizes is a popular one.
Well the data src attribute is just used for binding data for example ASP.NET ...
W3School src attribute
MSDN datasrc attribute
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.
I'm actually needing to include html links in the longdesc attribute. I've altered prettyphoto to use longdesc instead of title for images, but I need to include html links in those descriptions. I know it's possible with code for characters, I just don't remember what those are.
Thanks
This can be done with the longdesc attribute:
<img src="theimage.png" longdesc="thedescription.html" />
And then, in thedescription.html:
Link
One alternative way to do this is by using an OBJECT element, as follows:
<OBJECT data="theimage.png" type="image/png">
Link
</OBJECT>
Also, since you asked for it, here is how to convert html entities automatically in jquery:
$('<div/>').text('Some Link').html();
// the above evaluates to <a href="link.html">Some Link</a>
I'm not sure if this is what you're looking for, but you can use Walter Zorn's wz_tooltip to show a tooltip with any kind of content.
And example of use:
<img src="theimage.png" onmouseover="Tip('<a href=\'http://test.com/\'>Link</a>');" onmouseout="UnTip();">
The longdesc attribute is an URI, not a place to add code. In other words, you'll need to create a page that the longdesc links to. This page is where you'll make a thorough description of what's on the image.
Are you looking for the html entities?
If so, these are what you are looking for:
> = >
< = <
" = "
' = '
I need to open a page inside another page without the horizontal scroll bar in the inner page.
I don't want to use <iframe> tags on my page. Is there any substitute to the <iframe> tag??
If this is about the scrollbars (you mentioned that in your comment), you can hide/show them using stylesheets - try the following:
<body style="overflow-y:hidden; overflow-x:hidden">
...
</body>
You can use the styles on other tags (textareas etc.) as well.
PS: If you clarify your question, it's a good idea to edit the original post instead of commenting - this will make it easier to understand your question.
Best way to avoid IFRAME is to use AJAX. If you would use jQuery it is as simple as that:
$('#yourDIV').load('http://someurl.com/example.html');
Where #yourDIV is ID of any element you want, DIV for example.
Maybe <object> or <embed> or something like that. I think you can put an html there. But that would be sort of the same, i guess...
If you want to validate against strict, <object> should be the way to go.
<object data="example.html" type="text/html" width="500" height="300"></object>
Please note that MSIE 6 doesn't support html object tags.