Hello I have a local storage link that needs to be displayed as a img src. If the local storage link is google.com I want it to be displayed as a img src
code so far
<body>
<div id="result">
</div>
<img src="" id="photo" /> //this is the img element
<script>
if (typeof(Storage) !== "undefined") {
var name = localStorage.getItem('name');
var dataImage = localStorage.getItem('imgData');
document.getElementById("photo").innerHTML = localStorage.getItem("name"); //localstorage
} else {
document.getElementById("photo").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
I know this question is confusing but this is the best I could describe.
You can set the image src attribute to the value you get from local storage. (Assuming that's a path to an image)
You would not want to set the innerHTML of an img tag. Instead, use another element to display text.
<div id="result"></div>
<img src="" id="photo" /> //this is the img element
<div id="msg"></div>
<script>
if (typeof(Storage) !== "undefined") {
var name = localStorage.getItem('name');
var dataImage = localStorage.getItem('imgData');
var imageName = localStorage.getItem("name");
var imageEl = document.getElementById("photo");
imageEl.src = imageName
} else {
document.getElementById("msg").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
Related
I want to print a PDF manually.
I tried the iframes way, but showing me cross-origin issues. To resolve this I tried:
function printIframe(url) {
var proxyIframe = document.createElement('iframe');
var body = document.getElementsByTagName('body')[0];
body.appendChild(proxyIframe);
proxyIframe.style.width = '100%';
proxyIframe.style.height = '100%';
proxyIframe.style.display = 'none';
var contentWindow = proxyIframe.contentWindow;
contentWindow.document.open();
contentWindow.document.write('<iframe src="' + url + '" onload="print();" width="1000" height="1800" frameborder="0" marginheight="0" marginwidth="0">');
contentWindow.document.close();
}
<button type="button" onclick="printIframe('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf')">Print</button>
And the above code is opening a print window, but the content is empty.
The other method I tried is:
<a href="javascript: w=window.open('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'); w.print();" >PRINT</a>
This will open the page for me, but won't open the print dialog.
Please let me know any feasible solution that works here.
Thanks.
Use
<embed>
tag to embed a pdf inside a document
Create a HTML file and copy paste the below code, it worked well for me
<head>
<style>
</style>
</head>
<body>
<embed
type="application/pdf"
src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
id="pdfDocument"
width="100%"
height="100%" />
<script type="text/javascript">
function printDocument(documentId) {
var doc = document.getElementById(documentId);
//Wait until PDF is ready to print
if (typeof doc.print === 'undefined') {
setTimeout(function(){printDocument(documentId);}, 1000);
} else {
doc.print();
}
}
document.getElementById("pdfDocument").onload = function(){
printDocument("pdfDocument");
}
</script>
</body>
I have an iframe that I have control of posted into the container on a different domain.
I want to grab an image url in the parent container and insert it into aninput value in the iframe.
Here's my javascript code in the iframe:
<script>
function displayMessage (evt) {
var message;
if (evt.origin !== "https://container-url.com") {
message = "You are not worthy";
} else {
message = "testing";
}
document.getElementsByClassName('text')[2].setAttribute("value", message);
}
if (window.addEventListener) {
// For standards-compliant web browsers
window.addEventListener("message", displayMessage, false);
} else {
window.attachEvent("onmessage", displayMessage);
}
</script>
Here's my javascript in the <head> of the container:
<script>
window.onload = function () {
var iframeWin = document.getElementById("da-iframe").contentWindow,
myMessage = document.getElementsByClassName('portfolio_item_image wp-post-image')[0].src;
window.document.onload = function () {
iframeWin.postMessage(myMessage, "https://iframe-url.com");
return false;
};
};
</script>
Im trying to take the url of an image in the container that looks like this:
<img width="2000" height="1383" src="https://example.com/12.jpg," class="portfolio_item_image wp-post-image" alt="" srcset="https://example.com/123.jpg, https://example.com/1234.jpg," sizes="(max-width: 2000px) 100vw, 2000px">
and insert it into the value of an input in theiframe that looks like this:
<input type="text" name="505" id="505" value="" class="text" size="30" maxlength="65535">
I'm not getting any errors. I just cannot figure out what I'm doing wrong.
currently i am choosing a file and converting to base64 string and displaying in html page.see the below code.
But i want in such a way that while loading the function it will automatically fetch the file from the location where the image saved and convert to base64 and display. I just want to skip the manual way of choosing..please help
<html>
<body>
Choose File: <input id="imageToLoad" type="file" onchange="displayImage();" />
<p>Image encoded</p>
<textarea id="base64TextArea" style="width:550;height:240" ></textarea>
<img id="myImg" width="218" height="300" src="" />
<script type="text/javascript">
function displayImage()
{
var filesSelected = document.getElementById("imageToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
base64TextArea.innerHTML = fileLoadedEvent.target.result;
document.getElementById("myImg").src = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
</body>
</html>
You can't fetch arbitrary files on a client's computer with JS. Using most browsers, the client must manually choose a file to be processed by the script.
If you think about it, it would be a major security flaw if any website could access any file on your computer.
I'm not sure why Base64 is an important aspect here. Please give some details if converting the image to text is a specific requirement of your needs, but if you only want to display and reference the image, you can start with this:
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
document.getElementById("myImg").src = URL.createObjectURL(fileToLoad);
}
This will use an "object URL" which is a shorthand way of referring to a file that has been drag/dropped, or picked from an <input>
I have some code that grabs images from an API and it all works fine however, I can't figure out how to remove the original query before the other is displayed.
Open to other methods as well.
<html>
<body>
<div>Stock History Graph :</div>
<form>
<input type="text" value="" id="imagename"/>
<input type="button" id="btn" value="Update" />
</form>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('imagename').value,
src = 'http://chart.finance.yahoo.com/z?s=' + val +'.AX'+'&t=6m&q=l&l=on&z=s&p=m50,m200"',
img = document.createElement('img');
img.src = src;
document.body.appendChild(img);
}
</script>
</body>
</html>
Create the img variable outside of the onclick function, then in the onclick function all you have to do is set the src of the image.
Right now you're creating a new element every time you click the button.
Check if Image already there just update src, no need to create tag again.
document.getElementById('btn').onclick = function() {
var val = document.getElementById('imagename').value,
src = 'http://chart.finance.yahoo.com/z?s=' + val +'.AX'+'&t=6m&q=l&l=on&z=s&p=m50,m200"',
img = document.getElementById("chart-comp") || document.createElement('img');
img.id = "chart-comp"
img.src = src;
document.body.appendChild(img);
}
Check this fiddle
In this example, alert is blank;
I want to read the location of iFrame, I am using object.src for this but it work only if I set its src attribute. But I set iFrame's location using window.open method and in this case it is not working. What I do ?
<body>
<iframe id="location" name="address" style="width:700px; height:700px;">
</iframe>
<script type="text/javascript" language="javascript">
window.open("http://www.google.com","address");
function clickMe()
{
var src = document.getElementBy Id("location").src;
alert(src);
}
</script>
<input type="button" onclick="clickMe()" value="click Me"/>
</body>
Instead of using window.open(), why don't you just use:
document.getElementById("location").src = "http://www.google.com";
Now you can get its location using getElementById()
You can do that by accessing the location.href attribute. Of course, for security reasons, browsers won't let you access the iframe's DOM if it's another domain.
var oIframe = document.getElementById("location");
// for compatibility
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
alert(oDoc.location.href);
Same security issue if you access via the handle which should work in the same domain
<script>
var win;
function load(link) {
win=window.open(link.href,link.target)
return win?false:true;
}
function tell(winName) {
try {
alert(win.location.href)
try {
var handle = window.open('',winName);
alert(handle.location.href)
}
catch(e) {
alert('oops getting location via window handle:'+e.message)
}
}
catch(e) {
alert('Ooops getting location:'+e.message)
}
}
</script>
<iframe src="about:blank" name="if1"></iframe><br/>
Load foreign link<br />
Load local link<br />
Tell<br />