I am trying to make a news preview from a separate file (text.html) I want to be able to just display the first 100 characters of a div (id="news"). I don't want to use Ajax or Php. Here is my code, not sure how to make it work, thanks guys.
<body onload="home()">
<div id="content"></div>
<script>
function home() {
var x = document.getElementById("content").innerHTML = '<object width="100%" height="100%" type="text/html" data="text.html"></object>';
var pre = x.substring(0,5);
alert(pre);
}
</script>
</body>
Related
Im making a game with javascript for my website, but its easy to hack or do sql infections on it, you can also just inspect the code and change the values of any variable in the script, how can i make the script and code not viewable and editable?
Here`s my code
<script>
var scoreNumber = 0;
document.getElementById('scoreLabel').value = scoreNumber;
document.getElementById("scoreLabel").innerHTML = scoreNumber;
</script>
<html>
<style>
body{
background-image: url('snow.gif');
background-size: cover;
}
</style>
<head>
<center>
<h1 id="bottom">Cilus Networks</h1>
// Anyone can change the scrollamount, which i dont want
<marquee scrollamount="20"
direction="right"
behavior="scroll">
<img id="one" src="santa.png" height="150" width="150">
</marquee>
<marquee scrollamount="20"
direction="left"
behavior="scroll">
<img id="two" src="santa.png" height="150" width="150"> <source src="plimp.mp3" type="audio/mp3">
</marquee>
</center>
<h1 id="scoreLabel">0</h1>
</head>
<body>
</body>
<script>
var powerup;
var lifes;
//Anyone can change this, which i also dont want.
powerup = 0;
if (powerup == 2 ) {
function add(){
scoreNumber = scoreNumber +1000
document.getElementById('scoreLabel').value = scoreNumber;
document.getElementById("scoreLabel").innerHTML = scoreNumber;
}
};
if (powerup == 5 ) {
function add(){
scoreNumber = scoreNumber +500
document.getElementById('scoreLabel').value = scoreNumber;
document.getElementById("scoreLabel").innerHTML = scoreNumber;
}
};
function add(){
scoreNumber = scoreNumber +1
document.getElementById('scoreLabel').value = scoreNumber;
document.getElementById("scoreLabel").innerHTML = scoreNumber;
setInterval(function(){ window.location.replace("http://cilusnetworks.com/thankyouMDT.php"); }, 400);}
</script>
Any ideas on how to do this? I have done som research but i cant seem to find anything..
Anything you send to the client is merely a suggestion of what you think would be a good idea for the client to do. The client is perfectly free to ignore your suggestions and do its own thing: show your code to the user instead of executing it, add 12 to every variable when it's defined, make demons fly out of your nose, whatever. If you really want to rule with an iron fist, you'll have to keep the logic of your game tightly under your control: all the game code lives on your server, never to be sent out, and you tell the client "this is what happens, what do you want to do?" And then make sure the response makes sense and is legal.
If you don't want to go that far, the best you can do is obfuscation, making it more difficult for the user to figure out what a valid change to your suggestion would be.
You might be able to do an <iframe></iframe> with the html file containing the game stuff on a different html file.
For example: <iframe src=“game.html”></iframe>
I have a HTML file named test.html and below are the content of that file.
<html>
<head></head>
<body>
This is the content.
</body>
</html>
Now I have another file where I want to show the test.html content by iframe and then match the content with something and do something if it matches.
Here is what I'm trying but I'm not getting the iframe data.
<html>
<head></head>
<body>
<iframe id="myIframe" src="test.html"></iframe>
<script>
var iframe = document.getElementById("myIframe");
var iframe_content = iframe.contentDocument.body.innerHTML;
var content = iframe_content;
// var content = "This is the content."; --> I want to get the iframe data here like this. Then match it with the following.
var find = content.match(/ is /);
if (find) {
document.write("Match Found");
} else {
document.write("No Match!");
}
</script>
</body>
</html>
Thanks in advance
As stated in the comments, you need to wait for the iframe content to load. https://developer.mozilla.org/en-US/docs/Web/Events/load
<iframe id="myIframe" src="https://stackoverflow.com/questions/45525117/get-iframe-content-by-using-javascript#"></iframe>
<script>
const myFrame = document.getElementById('myIframe');
myFrame.addEventListener('load', (evt) => {
console.log(evt.target === myFrame);
console.log(evt.target);
});
</script>
Nothing will work unless your web page and iframe have the same origin
I've got an assignment to embed relatively small pdf file inside html page and print the entire html pade including the pdf file inside the iframe.
Here is the structure of my html page:
Here is my code:
#media print{
body * {display:block;}
.toPrint{display:block; border:0; width:100%; min-height:500px}
<body>
<button onclick="window.print()">Print</button>
<h3>MUST BE PRINTED</h3>
<p> MUST BE PRINTED</p>
<iframe class="toPrint" src="https://nett.umich.edu/sites/default/files/docs/pdf_files_scan_create_reducefilesize.pdf" style="width:100%; height:97vh;"></iframe>
<h3>MUST BE PRINTED</h3>
<p> MUST BE PRINTED</p>
</body>
Currently I'm printing the page using css #media query. But unfortunately this media query prints the pdf's first page only.
What can I do print the entire pdf file?
The reason it's not printing the whole PDF is because it's in an iframe and the height is fixed. In order to print the whole PDF you'll need the iframe height to match its content height (there should be no scrollbar on the iframe).
Another option is to print only the iframe. Add id to your iFrame:
<iframe id="toPrint" class="toPrint"></iframe>
Focus the iframe and print its content:
var pdfFrame = document.getElementById("toPrint").contentWindow;
pdfFrame.focus();
pdfFrame.print();
Try this, it includes some JS but thats always good.
HTML:
<body>
<h3>MUST BE PRINTED</h3>
<p> MUST BE PRINTED</p>
<div id="pdfRenderer"></div>
<h3>MUST BE PRINTED</h3>
<p> MUST BE PRINTED</p>
</body>
JS:
var pdf = new PDFObject({
url: "https://nett.umich.edu/sites/default/files/docs/pdf_files_scan_create_reducefilesize.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");
This should work. Let me now if i doesnt
Use https://github.com/itext/itextsharp itextsharp or https://github.com/MrRio/jsPDF jsPDF. It is easy to use by plugin
I used Mozilla's pdf.js to solve my problem.
It renders the pdf file on html5 canvas thus it allows to print the whole html page as required.
Here is the code (credit):
<html>
<body>
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
function renderPDF(url, canvasContainer, options) {
var options = options || { scale: 1 };
function renderPage(page) {
var viewport = page.getViewport(options.scale);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
canvas.height = viewport.height;
canvas.width = viewport.width;
canvasContainer.appendChild(canvas);
page.render(renderContext);
}
function renderPages(pdfDoc) {
for(var num = 1; num <= pdfDoc.numPages; num++)
pdfDoc.getPage(num).then(renderPage);
}
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);
}
</script>
<h3>MUST BE PRINTED</h3>
<p> MUST BE PRINTED</p>
<div id="holder"></div>
<h3>MUST BE PRINTED</h3>
<p> MUST BE PRINTED</p>
<script type="text/javascript">
renderPDF('yourFile.pdf', document.getElementById('holder'));
</script>
</body>
</html>
Here is a simpler solution using javascript.
<body>
<h3 id='first_h3'>MUST BE PRINTED</h3>
<p id ='first_paragraph'> MUST BE PRINTED</p>
<div id="pdfRenderer"></div>
<h3 id='second_h3'>MUST BE PRINTED</h3>
<p id='second_paragraph'> MUST BE PRINTED</p>
<input type="submit" value="Print All"
onclick="javascript:printPage()"
/>
</body>
<script>
pages =[] // initiate an empty list here
function printPage() {
var first_h3 = document.getElementById('first_h3');
// get the first h3 tag and
// then push its innerHTML into the list
pages.push(first_h3.innerHTML);
var first_paragraph = document.getElementById('first_paragraph');
// get the first paragraph and
// then push its innerHTML into the list
pages.push(first_paragraph.innerHTML);
var pdfRenderer = document.getElementById('pdfRenderer');
// get the pdfRenderer and
// then push its innerHTML into the list
pages.push(pdfRenderer.contentWindow.document.body.innerHTML);
var second_h3 = document.getElementById('second_h3');
// get the second h3 tag and
// then push its innerHTML into the list
pages.push(second_h3.innerHTML);
var second_paragraph = document.getElementById('second_paragraph');
// get the second paragraph and
// then push its innerHTML into the list
pages.push(second_paragraph.innerHTML);
if (pages && pages.length) {
// this if statement, just checks to ensure our list is not empty before running the code.
// here is the magic, we now set the parent window to be equal to all the concatenated innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the different parts in the exact order we pushed them into the list.
window.print();
}
else {
// do nothing
}
}
</script>
With this solution avoid the problem of the iframe being cut off if it exceeds one page. Secondly, you get only one print dialogue box even if you have multiple iframes.
I have a file called iframe.html, which contains the code to for a image slideshow or etc. The code is somewhat like
<html>
<head>
</head>
<body>
<iframe id="i1" src="test.html"></iframe>
<div id='i2'></div>
</body>
</html>
i want to get content of iframe and set i2 with that in jQuery such as:
$(document).ready(){
var i1= $('#i1').contents();
$('#i2').html( i1 );
}
that do not correct, how to resolve that?
Change : <iframe id="i1" src="test.html"></iframe>
to
<iframe id="i1" src="test.html" onload='aaa();'></iframe>
And add :
function aaa(){
var a= $('#i1').contents().find("html").html()
$('#i2').html( a );
}
If you look at the console, you'll probably see a syntax error.
Add the closing parenthese after your $(document).ready and the function keyword, like this:
$(document).ready(function() { // function here
var i1= $('#i1').contents();
$('#i2').html( i1 );
}); // closing parenthese here
I need to output a DIV width into a URL for an iframe but am having some trouble. I have managed to get java to output the div width, but encounter a problem when getting this into the URL. Below is the code I am using (notice the width=
<iframe src="http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=<script language='javascript'>var e = document.getElementById('Single2');
document.write(e.offsetWidth);</script>"></iframe>
This outputs the URL as:
http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=var e = document.getElementById('Single2');
document.write(e.offsetWidth);
As you can see the URL has the full javascript in, not just it's output.
Ideally the URL should be as such (lets assume the DIV width is 650px).
http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=650
Any ideas how I can get this working?
You should do this in the following way (pseudo code)
<iframe id="myIframe"></iframe>
<script>
document.getElementById("myIframe").src = ... // construct URL here
</script>
Let me know if you need a working example.
Here is a working example
<head>
<script type="text/javascript">
function changeContent()
{
console.log("changing src");
var myIframe = document.getElementById("guy");
myIframe.src = "http://steps.mograbi.info/users/sign_in?unauthenticated=true&width=" + myIframe.offsetWidth;
}
</script>
</head>
<body>
<iframe id="guy"></iframe>
<script>
document.onload = changeContent();
</script>
</body>
If you track the network, you will see the width passing..
You can't put <script> tag in src, it will be treated as String.
<iframe id="myiframe"></iframe>
<script type='text/javascript'>
var e = document.getElementById('Single2');
var url = "http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=" + e.offsetWidth;
document.getElementById("myiframe").setAttribute("src",url);
</script>