Open html text in new tab using $window.open - javascript

$window.open('<span>request processed successfully</span>', '_blank');
I would like the $window service to show the simple text request processed successfully in a new tab.
But instead of it, it treats the html text as location url and tries to open the page http://domain-addr#request processed successfully
How can i pass html text argument to angular's $window service?

You can do something like this in standard JavaScript...
function newWindow() {
// create some html elements
var para = document.createElement('p');
var title = document.createElement('title');
// define some window attributes
var features = 'width=400, height=400, status=1, menubar=1, location=0, left=100, top=100';
var winName = 'New_Window';
// populate the html elements
para.textContent = 'Some example text.';
title.textContent = 'New Window Title';
// define a reference to the new window
// and open it with defined attributes
var winRef = window.open('', winName, features);
// append the html elements to the head
// and body of the new window
winRef.document.head.appendChild(title);
winRef.document.body.appendChild(para);
}

you can use pure javascript,
var w = window.open("www.mydomain.com/test.php", "_blank");
w.document.write('<span>request processed successfully</span>');

you could just create a simple html document with called success.htm or similar with "request processed successfully" and include that in the function.
so $window.open('success.html','_blank', 'size blah blah');

Try this:
HTML:
<button id="newWindow">
Click
</button>
JavaScript:
//call the function right away
(function() {
//grab button by id
var newWindow = document.getElementById("newWindow");
//add an event listener
newWindow.addEventListener("click", function() {
//create a new p element
var p = document.createElement('p');
// change the styles of your paragraph
// optional
p.style.color = "red";
p.style.fontSize = "4em";
//Insert the text you want
p.textContent = "request processed successfully";
//open the window
var windRed = window.open('', '_blank');
//append the p element to the new window's body
windRed.document.body.appendChild(p);
}, false);
})();

Related

Specify file name when printing page element using javascript

I need to specify a filename when printing a page element using javascript.
Here is my code that will print the specified elementId from the page:
function printPartOfPage(elementId) {
var printHeader = document.getElementById('header');
var printContent = document.getElementById(elementId);
var windowUrl = 'NewWindow';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName, 'left=20,top=200');
printWindow.document.write('<html xmlns="http://www.w3.org/1999/xhtml"><head>');
printWindow.document.write('<link href='+sURL+'css/style.css rel="stylesheet">');
printWindow.document.write('<link href='+sURL+'css/print.css rel="stylesheet">');
printWindow.document.write('</head><body>');
printWindow.document.write(printContent.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.focus();
setTimeout(function(){
printWindow.print();
}, 500)
printWindow.setTimeout("window.close()", 2000);
}
This works fine, except that the default file name that appears in the print dialog is download.pdf and I need to specify my own file name based on parameters from the url:
https://example.com/a/b/c/123456789/2019/1
I would like to construct a file name using the last three elements of the URL such that the default file name that appears in the print dialog window is:
123456789_2019_1.pdf
Take a look at this: How to set a file name using window.open
Seems to be a work around, but a good one.

Pass value to be inserted in div to open window

I am trying to open a new window in the same tab and pass some html code to be inserted in a div section of the new open window. I am having trouble to pass the data as shown below:
Parent javascript:
function popupPlace() {
var mywindow = window.open('Details.html','_self');
mywindow.dataFromParent = placeListAll;
mywindow.init();
}
Child javascript:
<script type="text/javascript">
var dataFromParent;
function init() {
document.getElementById('Place').innerHTML=dataFromParent;
}
</script>
The init method is not being called.
Are you sure you're not talking about a new tab in the same window? Anymway the better way for you to send data in your new tab seems to pass it as url param :
window.open('Details.html?data=some-data-maybe-b64-encoded','_self');
Then you can get it in child with :
var urlParams = new URLSearchParams(window.location.search);
var data = urlParams.get('data'));
finally :
//parent
function popupPlace() {
//encoding to be able to store html in uri
var htmlForChild = encodeURIComponent("<p>Content for Children</p>");
var mywindow = window.open('Details.html?data=' + htmlForchild, '_self');
mywindow.dataFromParent = placeListAll;
mywindow.init();
}
//child
function init() {
var urlParams = new URLSearchParams(window.location.search);
document.getElementById('Place').innerHTML=decodeURIComponent(urlParams);
}

Javascript: Get the innerHTML of a dynamically created div

I am retrieving some information from an xml file ( movie information ) and I am creating dynamically some DOM elements according to each movie. I want, when I click on the test element, to get the value of the title of the movie. Right now, no matter which movie I click, it gets the title of the last movie that was introduced.
How can I get the title of each individual movie when I click on that div and not the last one introduced by the for-loop?
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("movie");
for (i=0;i<x.length;i++)
{
var titlu = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var description = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
var descriere = document.createElement('div');
descriere.className='expandedDescriere';
descriere.innerHTML = description;
var titlediv = document.createElement('div');
titlediv.className = 'title';
titlediv.id='title';
titlediv.innerHTML = title;
var test=document.createElement('div');
test.className='test';
test.onclick= function(){
var filmName= test.previousSibling.innerHTML;
alert(filmName);
}
placeholder.appendChild(titlediv);
placeholder.appendChild(test);
placeholder.appendChild(descriere);
}
I think your problem might be in the function you assigned to onclick:
test.onclick= function(){
var filmName= test.previousSibling.innerHTML; // <===
alert(filmName);
}
the marked line should be var filmName= this.previousSibling.innerHTML;
My guess is that the var test is hoisted out of the for loop, meaning that when the loop finished, all the onclick function are referencing the same test variable which is the last element you created.
Use this to reference the clicked element:
test.onclick = function() {
var filmName = this.previousSibling.innerHTML;
alert(filmName);
};

changes not reflected in JS

I am trying to setup a new "a" component using JS function which is called , using following :
function add_div(data){
mydiv = document.getElementById("new_twt");
var link =document.createElement("a");
var text = "you have new conversations";
link.setAttribute("name",text);
link.onclick=function(){new_tweet(data);};
mydiv.appendChild(link);
}
Changes are not reflecting on the webpage , however if I use some other element such as button or new div it gets created instantly, am I missing something?
This works for me:
function add_div(data){
var mydiv = document.getElementById("new_twt");
var link = document.createElement("a");
var text = "you have new conversations";
link.name = text;
link.href = '#';
link.innerHTML = 'link';
link.onclick=function(){ new_tweet(data); return false; };
mydiv.appendChild(link);
}
I've added link text (innerHTML) so you can actually see the link
I've also added "href" so the link behaves as a link (with this you need to prevent default link action, like "return false" in the event listener, to prevent browser from jumping to the top)
Try this:
var mydiv = document.getElementById("new_twt");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm"); //or #
aTag.innerHTML = "you have new conversations";
aTag.onclick=function(){new_tweet(data);};
mydiv.appendChild(aTag);
Here is working JS Fiddle.

Open a blank window, write to it, and select the written text

I'm trying to open a blank window with Javascript, write text to it, and then select the text that I wrote, all automatically.
I have:
var myWindow=window.open('');
myWindow.document.write("hey");
myWindow.select();
which opens the window and writes the text, but does not select it.
This should do it:
var myWindow=window.open('');
myWindow.document.write("<div id='hello'>hey<div>");
var range = myWindow.document.createRange();
range.selectNode(myWindow.document.getElementById('hello'));
myWindow.getSelection().addRange(range);
myWindow.select();
var popup = window.open('message.html',"'" + name + "'",'height=300,width=300,location=no,resizable=yes,scrollbars=yes');
var element = document.createElement('div');
element.setAttribute('id', 'mydiv');
element.appendChild(document.createTextNode('blah blah'));
popup.window.onload = function() {
var win = popup.document.body;
win.appendChild(element);
var el = popup.window.document.getElementById('mydiv').innerHTML;
alert(el); //tested - ouputs 'blah blah'
};

Categories

Resources