I am looking for a way to embed HTML code in a page. I already know that the embed element can do this for me:
<!DOCTYPE html>
<html>
<body>
<h1>The embed element</h1>
<embed type="text/html" src="snippet.html" width="500" height="200">
</body>
</html>
However, the embed element takes an html file as src. I am wondering if I could pass a verbatim string (as the HTML code) to the embed element. Is this doable with any other mechanism?
My goal is to be able to change the verbatim string dynamically with a JS code, so that the generated embedded HTML changes dynamically.
You can add your html code to the srcdoc of an iframe:
<iframe srcdoc="<html><body><h1>Hello World!</h1></body></html>" />
Related
I am getting a mail body encoded in base64:
PCFET0NUWVBFIGh0bWw-PGhlYWQ-PG1ldGEgbmFtZT0iY2hhcnNldCIgY29udGVudD0idXRmLTgiPjx0aXRsZT48L3RpdGxlPjwvaGVhZD48Ym9keT4NCg0KICAgICAgICAgICAgPGRpdiBhbGlnbj0iY2VudGVyIj4KICAgICAgPGEgaHJlZj0iaHR0cDovL25saWMuc3BlZWRvbWFpbGh1Yi5pbi9jYW1wYWlnbnMvZGozOTR5a2hwMzkyYy90cmFjay11cmwvYXczNTFheGJ0djdmNi85YzE4NzI5NDQ1ZGNjYTM2ZTQ1ZWZjMGRhYTRjOTRiZTE4YjE5OGFhIj48aW1nIGFsdD0iIiBzcmM9Imh0dHA6Ly9oYXNxLnNwZWVkb21haWxodWIuaW4vc2s1NTExOWdiODkwMC9kajM5NHlraHAzOTJjL3ZxMDE1eHo3YmExYzJfMS5wbmciPjwvYT4KICAgIDwvZGl2PjxkaXYgc3R5bGU9InRleHQtYWxpZ246Y2VudGVyOyI-WW91IGNhbiBzaW1wbHkgV0lQRSBPdXQgeW91ciBlbWFpbCBmcm9tIE1haWxpbmcgTGlzdMKgPGEgaHJlZj0iaHR0cDovL25saWMuc3BlZWRvbWFpbGh1Yi5pbi9saXN0cy9sYzczMTdoYWhnM2Q4L3Vuc3Vic2NyaWJlL2F3MzUxYXhidHY3ZjYvZGozOTR5a2hwMzkyYy8zIiB0YXJnZXQ9Il9ibGFuayI-IGNsaWNrIGhlcmUgPC9hPjwvZGl2Pgo8aW1nIHdpZHRoPSIxIiBzcmM9Imh0dHA6Ly9ubGljLnNwZWVkb21haWxodWIuaW4vY2FtcGFpZ25zL2RqMzk0eWtocDM5MmMvdHJhY2stb3BlbmluZy9hdzM1MWF4YnR2N2Y2IiBhbHQ9IiIvPjwvYm9keT48L2h0bWw-DQoNCg==
I have an html page:
<a href="data:text/css;base64,PCFET0NUWVBFIGh0bWw-PGhlYWQ-PG1ldGEgbmFtZT0iY2hhcnNldCIgY29udGVudD0idXRmLTgiPjx0aXRsZT48L3RpdGxlPjwvaGVhZD48Ym9keT4NCg0KICAgICAgICAgICAgPGRpdiBhbGlnbj0iY2VudGVyIj4KICAgICAgPGEgaHJlZj0iaHR0cDovL25saWMuc3BlZWRvbWFpbGh1Yi5pbi9jYW1wYWlnbnMvZGozOTR5a2hwMzkyYy90cmFjay11cmwvYXczNTFheGJ0djdmNi85YzE4NzI5NDQ1ZGNjYTM2ZTQ1ZWZjMGRhYTRjOTRiZTE4YjE5OGFhIj48aW1nIGFsdD0iIiBzcmM9Imh0dHA6Ly9oYXNxLnNwZWVkb21haWxodWIuaW4vc2s1NTExOWdiODkwMC9kajM5NHlraHAzOTJjL3ZxMDE1eHo3YmExYzJfMS5wbmciPjwvYT4KICAgIDwvZGl2PjxkaXYgc3R5bGU9InRleHQtYWxpZ246Y2VudGVyOyI-WW91IGNhbiBzaW1wbHkgV0lQRSBPdXQgeW91ciBlbWFpbCBmcm9tIE1haWxpbmcgTGlzdMKgPGEgaHJlZj0iaHR0cDovL25saWMuc3BlZWRvbWFpbGh1Yi5pbi9saXN0cy9sYzczMTdoYWhnM2Q4L3Vuc3Vic2NyaWJlL2F3MzUxYXhidHY3ZjYvZGozOTR5a2hwMzkyYy8zIiB0YXJnZXQ9Il9ibGFuayI-IGNsaWNrIGhlcmUgPC9hPjwvZGl2Pgo8aW1nIHdpZHRoPSIxIiBzcmM9Imh0dHA6Ly9ubGljLnNwZWVkb21haWxodWIuaW4vY2FtcGFpZ25zL2RqMzk0eWtocDM5MmMvdHJhY2stb3BlbmluZy9hdzM1MWF4YnR2N2Y2IiBhbHQ9IiIvPjwvYm9keT48L2h0bWw-DQoNCg==" />See html</a>
which on clicking See html opens a file with html written in the form of text:
<!DOCTYPE html>
<head><meta name="charset" content="utf-8">
<title></title>
</head>
<body>
<div align="center">
<a href="http://nlic.speedomailhub.in/campaigns/dj394ykhp392c/track-url/aw351axbtv7f6/9c18729445dcca36e45efc0daa4c94be18b198aa">
<img alt="" src="http://hasq.speedomailhub.in/sk55119gb8900/dj394ykhp392c/vq015xz7ba1c2_1.png"></a>
</div>
<div style="text-align:center;">You can simply WIPE Out your email from Mailing List click here
</div>
<img width="1" src="http://nlic.speedomailhub.in/campaigns/dj394ykhp392c/track-opening/aw351axbtv7f6" alt=""/>
</body>
</html>
How do I show this as an actual html file, just like it shows on run code instead of just plain html text.
Is there any way I can directly convert the base64 to an actual html page. IS it possible with python?
Use it with iframe. Simply make sure you use the correct data (data:text/html;charset=utf-8;base64) and that you have a valid converted HTML
iframe {
border:none;
width:100%;
height:1000px;
}
body {
margin:0;
}
<iframe src="data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPjxtZXRhIG5hbWU9ImNoYXJzZXQiIGNvbnRlbnQ9InV0Zi04Ij4NCiAgPHRpdGxlPjwvdGl0bGU+DQogIDwvaGVhZD4NCiAgPGJvZHk+DQogICAgPGRpdiBhbGlnbj0iY2VudGVyIj4NCiAgICAgIDxhIGhyZWY9Imh0dHA6Ly9ubGljLnNwZWVkb21haWxodWIuaW4vY2FtcGFpZ25zL2RqMzk0eWtocDM5MmMvdHJhY2stdXJsL2F3MzUxYXhidHY3ZjYvOWMxODcyOTQ0NWRjY2EzNmU0NWVmYzBkYWE0Yzk0YmUxOGIxOThhYSI+DQogICAgICA8aW1nIGFsdD0iIiBzcmM9Imh0dHA6Ly9oYXNxLnNwZWVkb21haWxodWIuaW4vc2s1NTExOWdiODkwMC9kajM5NHlraHAzOTJjL3ZxMDE1eHo3YmExYzJfMS5wbmciPjwvYT4NCiAgICA8L2Rpdj4NCiAgICANCiAgICA8ZGl2IHN0eWxlPSJ0ZXh0LWFsaWduOmNlbnRlcjsiPllvdSBjYW4gc2ltcGx5IFdJUEUgT3V0IHlvdXIgZW1haWwgZnJvbSBNYWlsaW5nIExpc3TDgiA8YSBocmVmPSJodHRwOi8vbmxpYy5zcGVlZG9tYWlsaHViLmluL2xpc3RzL2xjNzMxN2hhaGczZDgvdW5zdWJzY3JpYmUvYXczNTFheGJ0djdmNi9kajM5NHlraHAzOTJjLzMiIHRhcmdldD0iX2JsYW5rIj4gY2xpY2sgaGVyZSA8L2E+DQogICAgPC9kaXY+DQogICAgDQogICAgPGltZyB3aWR0aD0iMSIgc3JjPSJodHRwOi8vbmxpYy5zcGVlZG9tYWlsaHViLmluL2NhbXBhaWducy9kajM5NHlraHAzOTJjL3RyYWNrLW9wZW5pbmcvYXczNTFheGJ0djdmNiIgYWx0PSIiLz4NCiAgPC9ib2R5Pg0KICANCiAgPC9odG1sPg=="></iframe>
if you want to convert a base64 file try by using a third party web like https://www.base64decode.org/ but what the file is supposed to be for? it seem like it's corrupted.. where do you get it/how do you created it?
You can't convert image to html, only you can do it's just parse text from this image, But not all text will be parsed correctly.
you can try this approach Scan and extract text from an image using Python libraries
What you ask, this work can done HTML Coder
I know how to load an html page in another html page (multiple methods, javascript, jquery, html5) and I know how to post login information on an html page and submit, but here is the problem. When I load the original html page in another html page, I cannot access the form since it is in an object tag. Here is how I load the html page:
var URL = http://sampleurl.com/testpage
document.getElementById("testDIV").innerHTML = '<object type="text/html" data="'+URL+'" width="100%" height="100%"></object>';
Now I am left with something like this:
<iframe class="container-frame" name="test" src="test" data-loaded="1">
#document
<html>
<head>...</head>
<body>
...
<form>...</form>
...
</body>
</html>
</iframe>
I am unable to access the body inside the iframe using javascript to have information posted to a form in that body.
I have tried stuff like:
document.getElementsByTagName("html")[0].childNodes...
But I cannot get to the inner form element nor the body surrounding it. Is there a way that this can be done?
I have 5 versions of the same html page. All the contents in the page is the same except for one hidden variable. I use the hidden variable for tracking something important.
I am trying to see if I can rewrite this by including a html with hidden variable. Here is my wrapper.shtml file
<html>
<body>
this is the superb page
<!--#include file="someHiddenVariable.html" -->
<iframe frameborder="0" height="400" scrolling="no" src="/INeedToReadTheHiddenVariableInThisPage.html" width="280"></iframe>
</body>
</html>
someHiddenVariable.html just has
<input type="hidden" value="something very important" />
INeedToReadTheHiddenVariableInThisPage.html contains a form and several textboxes. I have a javascript in INeedToReadTheHiddenVariableInThisPage.html file (included as iframe) and it submits the form.
I need access to the hidden variable in Javascript in INeedToReadTheHiddenVariableInThisPage.html
How can I structure my files. How can I access the hidden variable.
I use apache http server.
If you put a form tag arround your input in someHiddenVariable.html then I think you can try this:
parent.document.formname.fieldname.value
I'd like to make another "context" into my html page. Such as a page loaded by iframe. Now, what I'd like to do is use this iframe but without src.
Somethings like :
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:300px; height:20px;">
<html>
<head></head>
<body>
<div>
Hello World
</div>
</body>
</html>
</iframe>
I need this because I wont use ajax and I need a load a script that could make some problems in the same page-context (as I wrote yesterday on SO).
It seems that this is impossible :(, the only way to create a separate html file.
Source: http://stackprogramer.com/7276457/is-it-possible-to-create-iframe-without-src-but-with-my-html
Is there a way to target an HTML element that is being pulled in dynamically via an iframe. I have an example below to illustrate what I would like to do:
<html>
<body>
<iframe>
<html>
<body>
<a id="id">I want to target this element</a>
</body>
</html>
</iframe>
</body>
</html>
#id{display:none;}
Note: I am open to use javascript or similar to target this element. Accessing the content from the source is not an option.