html: print() embed file - javascript

I am showing a pdf inside a html using:
<embed id="print" src="file.pdf" type="application/pdf" width="100%" height="100%">
I would like to create a button that prints that file.
I thought it would be something like this; but it isn't working.
<button onClick="javascript:document.getElementById('print').print();">
Anybody an idea how I can call the print function on an embedded file?

<script type="text/javascript">
function printPDF(pdfUrl)
{
var w = window.open(pdfUrl);
w.print();
}
</script>
You can call this function printPDF("http://mywebsite.com/myfile.pdf")

Related

How can I use JavaScript to view the source code of all websites?

I want to have JavaScript to get a user's URL and return the source code of the website. I want to have this to essentially make an iframe, but with the actual code.
E.g. :
let userUrl = prompt("What website do you want displayed?","e.g. https://www.google.com");
function getSource(url){
//some code
return pageSource;
}
document.body.innerHtml=getSource(userUrl);
I tried to scrape a view page source website and turn it into an API that I could inject into JavaScript, but I had no luck.
<html>
<head><meta charset="us-ascii">
<title></title>
<script>
let userUrl = prompt("What website do you want displayed?","e.g.
https://www.google.com");
if (userUrl){
var srcFrame=""; //complete page code to inject into your iframe or return
var fetchMe = "https://example.com?q=" + userUrl;
fetch(fetchMe).then((response) => response.text()).then((text) => {
srcFrame = text;
//if injecting into iframe
myFrame.document.open();
myFrame.document.write(srcFrame);
myFrame.document.close();
// USE THE FOLLOWING TO ADD THE ORIGINAL URL AS THE baseURI SO RELATIVE
//LINKS & SCRIPTS WILL WORK AND ACCESS THE ORIGINAL SOURCE AND NOT YOUR
//SERVER
var addOrigBase= document.createElement('base');
addOrigBase.setAttribute('href',userUrl);
document.getElementById("myFrame").contentDocument.head.appendChild(addOrigBase);
});
};
</script>
</head>
<body>
<iframe onload="myFrame.frameElement.height =
(myFrame.frameElement.contentDocument.body.clientHeight)+10" frameborder=""
height="25px" id="myFrame" name="myFrame" scrolling="no" src="about:blank"
width="100%"></iframe>
</body>
</html>

Error in the Soundcloud API: Cannot read property 'substr' of null

I'm trying to code a Widget using Soundcloud API (locally).
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Soundcloud musics</title>
</head>
<body>
<h1>Soundcloud musics</h1>
<iframe id="iframe"
class="iframe"
width="100%"
height="465"
scrolling="no"
frameborder="no">
</iframe>
<script src="api.js"></script>
<script>
var player;
player = SC.Widget(document.getElementById('iframe'));
console.debug(player);
player.load('https://soundcloud.com/somesong', null);
</script>
</body>
</html>
The error i got from running this is :
Uncaught TypeError: Cannot read property 'substr' of null
E # api.js:204
d # api.js:328
n.exports.v # api.js:326
(anonymous function) # index.html:21
I've entered soundcloud's minimized api code into a js beautifier so i can track the error. Here's the code : https://jsfiddle.net/0anL7jfs/
Am i doing something wrong ? It seems that the problem is coming from the SC.Widget() function...
You'll need to change a couple of things:
Define src within your iframe with the player widget api url and properties:
<iframe id="iframe"
class="iframe"
width="100%"
height="465"
scrolling="no"
frameborder="no"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/76067623&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&visual=true">
</iframe>
Bind your events with widget.bind:
<script type="text/javascript">
(function(){
var iframeElement = document.getElementById('iframe');
var widget = SC.Widget(iframeElement);
widget.bind(SC.Widget.Events.READY, function () {
console.log('Ready');
widget.bind(SC.Widget.Events.PLAY, function () {
widget.getCurrentSound(function (sound) {
console.log(sound.title);
});
});
widget.bind(SC.Widget.Events.FINISH, function () {
console.log('Finished');
});
});
}());
</script>
Example:
http://jsfiddle.net/dqz1jmzo/ ( JQuery Version )

Including <div></div> in a library

I have a few "div" sections that are called by my Javascript function using document.getElementById('ID_NAME').style.display='block'.
My question, is there a way to include these "div's" in a .js, .css or another type of library sourced from my header?
If I copy and paste the div code directly into the head it works fine, however, when I try to include it in my .js or .css libraries it wont execute.
CODE
<script type="text/javascript>
function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";
if (a == b) {
setTimeout(function(){
document.getElementById('EXAMPLE1').style.display='block';}, 3000);}}
window.onload = myFunction();
</script>
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
I know there has to be a way to insert "div" code into a library. I need some of my clients to "src" it into their own websites easily.
Much appreciated Stack community!
Jon
In another separate JS file, divs.js:
divs.js
function changeDiv(){
document.getElementById('EXAMPLE1').style.display='block';
}
index.html
<script src="divs.js"></script>
<script type="text/javascript">
function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";
if (a == b) {
setTimeout(changeDiv, 3000);
}
window.onload = myFunction();
</script>
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
Also, there seems to be syntax errors in your code. Try to run this file with a JS console (use something like "Firebug") for debugging purposes.
I wanted to post that I finally worked this problem out. While my Javascript library wouldn't support code with some code in it, I was able to convert everything with DOM.
OLD CODE::
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
NEW CODE::
var embed = document.createElement('embed');
embed.setAttribute("src", "http://www.domain.com/");
embed.setAttribute("width", "100%");
embed.setAttribute("height", "100%");
var content = document.createElement('div');
content.id = 'EXAMPLE1';
content.className = 'offer_content';
content.appendChild(embed);
document.getElementsByTagName('body')[0].appendChild(content);

Image roll over script not working as expected

This is how I am calling the JavaScript function in my HTML page:-
<script type="text/javascript" src="imagerollover.js"></script>
</script>
<script type="text/javascript">
//Following function should be called at the end of the page:
imagerollover();
</script>
</head>
<body>
.
.
.
this is my imagerollover.js:-
function imagerollover(){
var allimages=document.getElementsByTagName("img")
var preloadimages=[]
for (var i=0; i<allimages.length; i++){
if (allimages[i].getAttribute("data-over")){ //if image carries "data-over" attribute
preloadimages.push(new Image()) //preload "over" image
preloadimages[preloadimages.length-1].src=allimages[i].getAttribute("data-over")
allimages[i].onmouseover=function(){
this.src=this.getAttribute("data-over")
}
allimages[i].onmouseout=function(){
this.src=this.getAttribute("data-out")
}
} //end if
} //end for loop
}
//Usage: Call following function at the end of the page:
//imagerollover()
Image tags:
<img src="knitting1.jpg"
data-over="knitting2.jpg"
data-out="knitting1.jpg"
alt="Logo" width="400px" height="90" align="middle" />
Also, both images knitting1.jpg and knitting2.jpg exist in my site's root folder. I don't know what is wrong.
I placed an alert inside imagerollover.js file in the beginning. It is getting called but it is not showing any roll over effect. Why?
You need to run this onload - your images tags are not yet available to the script when you execute the function - you are not actually following the instruction of the script which should have been placed at the end of the page or in my suggestion in the onload
<head>
<script type="text/javascript" src="imagerollover.js"></script>
</script>
<script type="text/javascript">
window.onload=function()
//Following function should be called at the end of the page OR on window.onload!
imagerollover();
}
</script>
</head>

Passing javascript variable from iframe to URL

Lets say I have a function like this:
<script type="text/javascript">
function ReturnURL()
{
var url = document.URL;
var url2 = url.split("=");
var urlID = url2[url2.length-1];
//window.open('http://localhost/POSkill/skillshow.aspx?user_id =' + urlID);
return urlID;
}
</script>
And I also have iframe in my html file which is something like below:
<iframe id="showSkill" scrolling="yes" src="http://localhost/POSkill/skillshow.aspx?user_id = ReturnURL()" height="350" runat="server" ></iframe>
Now all I want to do is to send the urlID value of javasrcipt as the user_id value in iframe. I have tried by using user_id = ReturnURL() but its not working.
How can I do this?
Thanks in Advance.
I answered something very similar at enter link description here
The answer is that you must set the "src" value on the JS rendering.
This means that somewhere in your javascript you should have the following code
...
document.getElementById("showSkill").src="http://localhost/POSkill/skillshow.aspx?user_id =" + ReturnURL()
...
This should work just fine.

Categories

Resources