I want to download appended valu as a HTML file.
here this is my code. values append from out html file through iframe.
this code working well and retrive correct value.
I just want to download that appended value as complete new HTML file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe export</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<iframe src="iframe.html" id="aaa"></iframe>
AAA
<script type="text/javascript">
function aaa()
{
var aaa=document.getElementById('aaa').contentWindow.document.body.innerHTML;
$("body").append(aaa);
}
</script>
</body>
</html>
Can you please help me to resolve this problem.
thanks in advance.
You can use a dummy <a> tag with a download attribute and a data URI:
function aaa()
{
var aaa=document.getElementById('aaa').contentWindow.document.body.innerHTML;
var link = document.createElement("a");
link.download = "filename.html";
link.href = "data:text/html," + aaa;
document.body.appendChild(link);
link.click();
}
Example
function createDownloadLink(anchorSelector, str, fileName){
if(window.navigator.msSaveOrOpenBlob) {
var fileData = [str];
blobObject = new Blob(fileData);
$(anchorSelector).click(function(){
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
});
} else {
var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
$(anchorSelector).attr("download", fileName);
$(anchorSelector).attr("href", url);
}
}
$(function () {
var str = aaa;
createDownloadLink("#download",str,"newsletter.html");
});
Related
I´m new on this and I´m having a hard time tryng to do something I think must be simple.
I have a lot of pages hosted on https://www.something.com/path/NUMBER/path/path
Inside those pages I have a button that links to https://www.example.com/path/REPLACE/path
I would like to change REPLACE on my link with NUMBER on the address bar.
This is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var newURL = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;
pathArray = window.location.pathname.split( '/' );
var part_2 = pathArray[2];
var mylink = "https://www.example.com/path/" + part_2 + "/path/page.html";
});
</script>
<p>BUTTON</p>
</body>
</html>
Thank you very much for your help!
try this.
Url1:- https://www.something.com/path/NUMBER/path/path;
Url2:- https://www.example.com/path/REPLACE/path;
url2 = url2.split('/').map(a => {
if(a == 'REPLACE')
return 'NUMBER';
else
return a;
}).join('/');
If you want to change using Javascript, you can do as below:
var url = "https://www.something.com/path/NUMBER/path/path";
var oldUrl = "https://www.example.com/path/REPLACE/path/path";
var regex = /https:\/\/www\.something\.com\/path\/(\w*?)\/.*/g;
var match = regex.exec(url);
oldUrl = oldUrl.replace("/REPLACE/", "/"+match[1]+"/");
console.log(oldUrl);
-- EDIT --
Another example to replace using browser URL and replace the second path without considering the remaining URL or paths .
$(document).ready(function() {
var url = window.location.href;
// As the script executed in iframe, assigning with hardcode value
url = "https://stackoverflow.com/questions/51442637/change-part-of-link-with-part-of-current-url#";
var oldUrl = "https://www.example.com/path/REPLACE/path/path";
var regex = /https:\/\/\w*?\.?\w*?\.\w*?\/\w*?\/(\w*?)\/.*/g;
var match = regex.exec(url);
oldUrl = oldUrl.replace("/REPLACE/", "/" + match[1] + "/");
document.getElementById("mylink").href = oldUrl;
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p>BUTTON</p>
</body>
</html>
EDIT:
I think i have found a solution for this one. Might be a little primitive but inserting it here until someone comes up with a better solution.
Thanks !
<html>
<body onload="makeShort()">
<p id="button" style=display:none; onclick="makeShort()">Click me.</p>
<span id="output" style=display:none; >Wait. Loading....</span>
</body>
<head>
</head>
<script type="text/javascript">
function makeShort()
{
var longUrl=location.href;;
var request = gapi.client.urlshortener.url.insert({
'resource': {
'longUrl': longUrl
}
});
request.execute(function(response)
{
if(response.id != null)
{
str =""+response.id+"";
document.getElementById("output").innerHTML = str;
}
else
{
alert("error: creating short url n"+ response.error);
}
});
}
window.onload = makeShort;
function load()
{
//Get your own Browser API Key from https://code.google.com/apis/console/
gapi.client.setApiKey('xxxxxx');
gapi.client.load('urlshortener', 'v1',function(){document.getElementById("output").innerHTML="";});
}
window.onload = load;
</script>
<script>
setTimeout(function(){
document.getElementById('button').click();
},1000);
</script>
<script src="https://apis.google.com/js/client.js"> </script>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
function SendLinkByMail(href) {
var subject= "Interesting Information";
var body = document.getElementById("output").innerHTML;
body += " Interesting Information";
var uri = "mailto:?subject=";
uri += encodeURIComponent(subject);
uri += "&body=";
uri += encodeURIComponent(body);
window.open(uri);
}
</script>
</head>
<body>
<p>Email link to this page</p>
</body>
</html>
Can some one suggest why this "auto-click" function is not working in my code below?
function makeShort() {
var longUrl = location.href;;
var request = gapi.client.urlshortener.url.insert({
'resource': {
'longUrl': longUrl
}
});
request.execute(function(response) {
if (response.id != null) {
str = "<b>Long URL:</b>" + longUrl + "<br>";
str += "<b>Short URL:</b> <a href='" + response.id + "'>" + response.id + "</a><br>";
document.getElementById("output").innerHTML = str;
} else {
alert("error: creating short url n" + response.error);
}
});} window.onload = function() {
var button = document.getElementById('modal');
button.form.submit();}
function load() {
//Get your own Browser API Key from https://code.google.com/apis/console/
gapi.client.setApiKey('xxxxxxxxx');
gapi.client.load('urlshortener', 'v1', function() {
document.getElementById("output").innerHTML = "";
});} window.onload = load;
<html>
<input type="button" id="modal" value="Create Short" onclick="makeShort();" /> <br/> <br/>
<div id="output">Wait. Loading....</div>
<head>
</head>
<script src="https://apis.google.com/js/client.js"> </script>
</html>
My basic aim is to insert a "share via email" button on the page which would shorten the url on the address bar and open user's email client/whatsapp app to share that url..
Obviously I could not find a way to combine these two functions in to one since I am not a very experienced js person. The primitive solution I found is to auto-click the first function, get the short url, and then find a different code to insert this in to the body of the "mailto" link, which will be my 2nd challenge.
To programmatically click a button on page load
If you are using jQuery:
$(function() {
$('#modal').click();
});
Plain javascript:
window.onload = function(){
var event = document.createEvent('Event');
event.initEvent('input', true, true);
document.getElementById("modal").dispatchEvent(event);
};
EDIT:
I do not want to save to a text file.... I want the user to be able to select their own file and use the variables within that file.
I would like to have the user upload their own "settings.js" file and then the page use the variables once loaded.
How would I change my code to reflect this?
At present I have the following javascript file and HTML code:
Javascript File: settings.js
var myVariable = 6000;
HTML file: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Load Javascript file</title>
</head>
<body>
<script src="settings.js"></script>
<div>
<script>
alert(myVariable)
</script>
</div>
</body>
</html>
Please help.
something like this maybe
document.getElementById("settings").addEventListener("change", function(){
if(this.files[0] && this.files[0].type == "text/javascript"){
var reader = new FileReader();
reader.onload = function (e) {
var settings = e.target.result.split("data:text/javascript;base64,")[1];
eval(atob(settings));
//use the loaded var's
document.getElementById("result").innerText = myVariable;
}
reader.readAsDataURL(this.files[0]);
}
});
<input type="file" id="settings">
<div id="result"></div>
Here is a full working code for you.
It will read file and print it as text for debugging on the screen and will add the file as script file to the page as well.
<!DOCTYPE HTML>
<html>
<head>
<script>
function loadScript() {
var inputFile = document.querySelector("#scriptFile"),
// Get the selected file
file = inputFile.files[0],
// HTML5 File API
fileReader = new FileReader();
// Add the onload event to the file
fileReader.onload = printFile;
// Read the file as text
fileReader.readAsText(file);
function printFile( reader ) {
// Get the text of the file
var content = reader.target.result,
script;
// Add the fileContent as script to the page
script = document.createElement('script');
script.textContent = content;
document.body.appendChild(script);
///////////////// DEBUG
var pre = document.createElement('pre');
pre.textContent = content;
document.body.appendChild(pre);
}
}
</script>
</head>
<body>
<input type='file' id='scriptFile'>
<input type='button' value='Load' onclick='loadScript();'>
</body>
</html>
This code will run javascript stored in your JS file. Use FileReader() to read file as text, and use eval(content); to execute that code. If you can execute JavaScript you can do anything you want. Use only variables, or anything else.
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
var content = reader.result;
//Here the content has been read successfuly
eval(content);
}
reader.readAsText(file);
} else {
document.innerText = "File not supported!"
}
});
<input type="file" id="fileInput">
We are attempting to save a URL stored in a string to a text file, but we can't seem to get it to work. It will not save into the file, although our testing shows that the function is actually running when it should be.
The code for this is here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button onclick="instagramclick()">Login to instagram</button>
<button onclick="myFunction()">Test Button</button>
<script>
function myFunction() {
alert("Hello World");
}
function instagramclick(){
alert("button clicked");
window.location.href = "https://instagram.com/oauth/authorize/?client_id=8a612cd650344523808233c0468c80ed&redirect_uri=http://u-ahmed.github.io/HookedUp/instagram.html&response_type=token";
}
function WriteDemo(link)
{
var fso, f, r;
var ForReading = 1, ForWriting = 2;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.OpenTextFile("database.txt", ForWriting, true);
f.Write(link);
f.Close();
r = f.ReadLine();
return(r);
}
window.onload = function writedamnyou(){
var token = window.location.href.substring(62);
if (token != ""){
// document.write(token);
var link = "https://api.instagram.com/v1/users/self/feed?access_token=" + token;
// w = window.open('database.txt')
WriteDemo(link);
// document.write(stuff);
}
};
</script>
<p id="no"></p>
</body>
</html>
Thanks in advance.
My client puts our below JS code in his website in the <head> and is complaining our tags are not firing. Below is the sample code from client:
<html>
<head>
<script type="text/javascript">
function create() {
try {
var baseURL = "https://serv2ssl.vizury.com/analyze/analyze.php?account_id=VIZVRM1125";
var analyze = document.createElement("iframe");
analyze.src = baseURL;
var node = document.getElementsByTagName("script")[0];
node.parentNode.insertBefore(analyze, node);
} catch (i) {
}
}
var existing = window.onload;
window.onload = function() {
if (existing) {
existing();
}
create();
}
</script>
</head>
<body onload="javascript:clientfunction();">
<script type="text/javascript">
function clientfunction()
{
//client code is replcad here
document.write("Hello testing");
}
</script>
</body>
</html>
On page Load clientfunction() is calling, our create() function is not firing.
Please can anybody help me why our tags are not firing and what is the alternative solution for this issue?
copy paste and check running following
<html>
<head>
<script type="text/javascript">
function create() {
alert("Gdfg");
try {
var baseURL = "https://serv2ssl.vizury.com/analyze/analyze.php?account_id=VIZVRM1125";
var analyze = document.createElement("iframe");
analyze.src = baseURL;
var node = document.getElementsByTagName("script")[0];
node.parentNode.insertBefore(analyze, node);
} catch (i) {
}
}
window.onload=create;
window.onload=clientfunction;
</script>
</head>
<body onload="clientfunction(); create()">
<script type="text/javascript">
function clientfunction()
{
alert("fdsfsdf");
//client code is replcad here
document.write("Hello testing");
}
</script>
</body>
</html>