Use an iframe with editable website - javascript

I want to create a website where I can write and preview a website. The problem is that I want to preview it in an iframe, because then the website isn't influenced by the HTML code around the iframe.
Is there a way to show a webpage in an iframe tag with a string as source instead of an URL?
This is how it should look (just an iframe).
<textarea onkeyup="document.getElementById("body").innerHTML=this.value;"></textarea>
<div id="body"></div>
In fact, JSFiddle does the same, so there must be a way. Ideas?

You can modify the content of the document specified by the src attribute, using contentWindow.document. So, assuming you had a <textarea> with the markup you want to preview, you could do something like this:
Editor document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Edit iframe example</title>
<style>
.editors, .preview { float: left; display: block; }
.editors { width: 500px; margin-right: 25px; }
.editors textarea { width: 100%; height: 300px; }
.preview { width: 800px; }
.preview iframe { width: 100%; height: 800px; }
</style>
</head>
<body>
<div class="editors">
<p>
<label>CSS</label>
</p>
<p>
<textarea id="preview-editor-CSS" onkeyup="updatePreviewCSS(this)"></textarea>
</p>
<p>
<label>HTML</label>
</p>
<p>
<textarea id="preview-editor-HTML" onkeyup="updatePreviewHTML(this)"></textarea>
</p>
</div>
<div class="preview">
<iframe id="preview" src="preview.html"></iframe>
</div>
<script>
function updatePreviewHTML(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.body.innerHTML = content;
}
function updatePreviewCSS(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.getElementsByTagName('style')[0].innerHTML = content;
}
</script>
</body>
</html>
The "preview" document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Preview iframe example</title>
<style></style>
</head>
<body>
</body>
</html>
I've only tried this locally, on Firefox 31, so caveat emptor.

Related

How to get Iframe's document content after changing its src in JS?

I have an iframe that changes src pages when the page would normally switch to another page so that my main JS file can continue running in the background. For the first page, the one defined in the HTML src for the Iframe, I can access the inner document just fine by using iframe.contentDocument.
However, when I change the src, the contentDocument does not change with it, and I cannot access the Iframe's document in the JS at all.
So is there any way to access the new document of an Iframe after changing its source in JS? Or is there an easier alternative for the way I am doing things?
Thanks.
How I've tried:
iframe.src = "pages/home/home.html"
innerDoc = iframe.contentDocument || iframe.contentWindow.document
and the innerDoc does not change from the original page.
I've even tried making an entirely new Iframe that never had the original page as its src
document.body.removeChild(iframe)
let i = document.createElement('iframe')
i.src='pages/home/home.html'
document.body.appendChild(i)
innerDoc = i.contentDocument || i.contentWindow.document
This just makes innerDoc an empty HTML document with an empty head and body.
It appears that the page you are loading inside the iframe is from the same domain as the parent window - so you should not need messaging.
You will, however, need to wait for the "load" event before accessing the page content. This is the same for any webpage, not just one embedded in an iframe. Note that you cannot access the contentWindow for an iframe until it is attached to the DOM:
let i = document.createElement('iframe');
// go ahead and attach it to the dom - you can "hide" it with css
document.body.appendChild(i);
// now that you can access the contentWindow, attach a "load" event
i.contentWindow.addEventListener('load', () => {
// now you should be able to access the content
});
// do this last to avoid race conditions with caching and what not
// this might not be necessary, but it doesn't hurt
i.src='pages/home/home.html'
You can "hide" the iframe off screen if you want with something like this:
iframe {
position: absolute;
top: -9999em;
width: 1px;
height: 1px;
}
the "messaging" way is using Window.postMessage
parent Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>main Page</title>
<style>
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
iframe { width: 24em; height: 15em; border:3px solid blue; }
#get-iframe-info { width: 24em; border: 1px solid orange; padding: .5em; }
</style>
</head>
<body>
<h4>main page</h4>
<p>parent input :
<input id="in-txt" type="text" placeholder="type something">
<button id="Bt-Send2iFrame">Send2iFrame</button>
</p>
<p> iframe part : <br>
<iframe id="iFrame-01" src="page_iFrame.html" frameborder="0"></iframe>
</p>
<p id="get-iframe-info">iframe return: <br>>
<span></span>
</p>
<script>
const
inTxt = document.querySelector('#in-txt')
, btSend = document.querySelector('#Bt-Send2iFrame')
, iFrame01_ct = document.querySelector('#iFrame-01').contentWindow
, sp_getiFram = document.querySelector('#get-iframe-info span')
;
btSend.onclick =_=>
{
let info = { txt: inTxt.value }
iFrame01_ct.postMessage( JSON.stringify(info), "*")
}
window.onmessage=e=>
{
let info = JSON.parse( e.data )
sp_getiFram.textContent = info.txt
}
</script>
</body>
</html>
iFrame page(s)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body { font-family: 'Courier New', Courier, monospace; font-size: 14px;}
p { width: 20em; border: 2px solid aquamarine; padding: .5em; }
</style>
</head>
<body>
<h4>page iFrame</h4>
<input id="inTxt" type="text" placeholder="send text">
<button id="btSend">send to parent</button>
<p id="get-parent-info"> info from Parent: <br>>
<span></span>
</p>
<script>
const sp_infoParent = document.querySelector('#get-parent-info span')
;
btSend.onclick =_=>
{
let info = { txt: inTxt.value }
window.parent.postMessage( JSON.stringify(info), "*")
}
window.onmessage=e=>
{
let info = JSON.parse( e.data )
sp_infoParent.textContent = info.txt
}
</script>
</body>
</html>

I was not able to see images while converting html page to pdf using javascript

here is my code while i download pdf images attributes of html are missing.
suppose in cases like generating invoices we should print tables containing details along with logo.
but images are not displaying in downloaded pdf using this code.Provide me with possible resolution and reason for this.thanks in advance
$(document).on('click', '#btn', function() {
let pdf = new jsPDF();
let section = $('body');
let page = function() {
pdf.save('pagename.pdf');
};
pdf.addHTML(section, page);
})
html,
body {
overflow-x: hidden;
}
#btn {
padding: 10px;
border: 0px;
margin: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
</style>
</head>
<body>
<button id="btn">Convert to PDF</button>
<div id="text">
<h2>HTML Page with Image to PDF</h2>
<img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
all the html elements are working fine except images . kindly help me with resolving this.
jsPdf does not support adding images the way you are trying to add them, because addtHtml function uses the html2canvas module, to convert your Html to canvas, so jsPdf can render it into pdf. Please check this link below.
https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764

On change input in parent send val to iframe with update

I need update iframe's content on input[text] changed(or on some another event).
For example: I'm typing in parent's input "Hello World!!!", and iframe's <h1>Hi</h1> is changing to
<h1>Hello World!!!</h1> symbol by symbol.
Better if solution will be on jQuery, but vanilla js is ok, too))
Thank you very much.
P.S. Sorry for my bad English(
better way is using Window.postMessage => https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
parent Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a Page..</title>
<style>
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
iframe { width: 300px; height: 200px; border: 1px solid #4593c6; }
</style>
</head>
<body>
<p>parent input :
<input id="in-Txt" type="text" placeholder="type something">
<button id="Bt-Send2iFrame">Send2iFrame</button>
</p>
<iframe id="in-Frame" src="xyz_frame.html" ></iframe>
<script>
const inText = document.querySelector('#in-Txt')
, btSend = document.querySelector('#Bt-Send2iFrame')
, inFramW = document.querySelector('#in-Frame').contentWindow
btSend.onclick=_=>{
let info = { inTxt: inText.value }
inFramW.postMessage( JSON.stringify(info), "*")
}
</script>
</body>
</html>
iframe page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p> the iframe </p>
<p id="info-Parent">...</p>
<script>
const infoParent = document.querySelector('#info-Parent')
window.onmessage=e=>
{
let message = JSON.parse ( e.data )
infoParent.textContent = message.inTxt
}
</script>
</body>
</html>
You can pass the value on the parent page as a parameter to the iframe.
Say for example the following
Parent HTML,
<input type="text" id="parenteElem">
<iframe id="frameOnParent">
Parent Script:
<script type="text/javascript">
$("#parentElem").on("change", function(event) {
$('#frameOnParent').attr('src', "test.html?param1=" + $(this).val());
})
</script>
Iframe HTML:
<h1>Hi</h1>
Iframe Script:
<script type="text/javascript">
function getHeader() {
var headerText = window.location.search.substring("param1");
return headerText;
}
var heading = getHeader();
$("h1").html(heading);
</script>

Store image from webcam in javascript and php

I want to save captured image in a folder from webcam. My code captures image only but how can I store it in a folder. This is my first time to do this. If anyone mention that it will be helpful for me. Thanks in advance.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.min.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</form>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
</script>

ngPaste on contentEditable div

I am using ngPaste on a contentEditable div instead of input type text. However, I am unable to fetch the pasted content in the way mention in this link. I am always getting undefined in my handler for ngPaste. Here's the code:
HTML:
<div contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))">
</div
>
JS:
scope.stripHtml = function(content) {
console.log(content); //this is always undefined
}
What am I doing wrong? How can I fetch the pasted content?
The Below Code (Modified from Sergey's) Worked in Windows platform, Firefox 43.0.4, Chrome 47.0.2526.111 m but NOT in IE 11.0.9.
<!DOCTYPE html>
<html>
<head>
<style>
.editable {
background: white;
height: 55px;
border: 2px solid blue;
width: 55%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('sampleController', function($scope) {
$scope.stripHtml = function(content) {
alert(content);
console.log(content);
};
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>AngularJS ng-paste within ContentEditable Div</title>
</head>
<body ng-app="myApp">
<div ng-controller="sampleController">
<div class="editable" contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))"></div>
</div>
</body>
</html>

Categories

Resources