Set Browser Title for PDF Page - javascript

I load a pdf that the user clicks on via a URL call. See the following javascript:
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
document.location = "/archives/entry/" + $(this).attr("data-entry-id");
}
);
I want to change the browser title of the pdf that comes up, so that it is not just the url. Adding document.title("New Title") to the function block does not work because it is not synchronized with the server returning the file that's being displayed in the browser. How can I overcome this?
Perhaps I could open a new page (rather than changing the document location) that wraps the URL call in html so that I can set the title - something like this:
<html>
<head>
<title>New Title</title>
</head>
<body>
<iframe src="/archives/entry/98"></iframe>
</body>
</html>
And that way, I could set the title. How can I write this html to a new page from within the javascript function block I have that responds to a click? Thanks in advance.

Instead of changing location you can load data by ajax.
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
var title = $(this).text();
var url = "/archives/entry/" + $(this).attr("data-entry-id");
document.body.innerHTML = "<p>Loading...</p>"; // Or a loading image
$.ajax(url).done(function(data){
$(document.body).html(data);
document.title = title;
})
}
);

If you set a title in the PDF document you can make it display as your browser title.
Follow these instructions:
http://www.w3.org/TR/WCAG20-TECHS/PDF18.html

A jQuery approach, relatively easy to modify for plain JavaScript:
$('body').html('<iframe src="/archives/entry/98">');
document.title = "New Title";

Related

How can I replace a window with html as well as change the location at the same time so assets in the html would load correctly?

Assuming I have some HTML with predefined assets using relative paths, how would I load that HTML in the current page and change the window location to the correct URL at the same time so that the page and all its assets load correctly.
Currently if I use:
const w = window.open()
w.document.write("<html><body><p>help</p></body></html>")
w.location.replace("http://baseUrl.com")
The page then renders the html and then reloads when the location is replaced, rendering the document.write useless.
Is there a way to do both at the same time so that the url loads as well as the html?
If I do
const w = window.open()
w.location.replace("http://baseUrl.com")
w.document.write("<html><body><p>help</p></body></html>")
The third line doesnt run because I lose access to the w variable when the location is replaced.
Any help would be appreciated. Thanks in advance.
What you could do is use a query string in the window.replace like so:
const w = window.open();
window.location.replace("http://baseUrl.com?data=" + encodeUriComponent("<html><body><p>help</p></body></html>"));
Then in the file at baseUrl.com:
var data = decodeUriComponent(window.location.href).split("?")[1];
document.write(data);
What this does is it passes an encoded URI query string into the URL (?data=<html><body><p>help</p></body></html>), then receives and decodes it, takes the bit at the end (the HTML) and writes it to the document. Hope this helps!
I'm not sure if there are better ways instead of relative url's for your target, but you may use <base href='...'> tag:
<script type="text/javascript">
document.head.innerHTML = document.head.innerHTML + "<base href='http://baseUrl.com/' />";
</script>
The base tag usually needs a trailing '/' at its end.
example:
<base href="http://localhost/mywebsite/" />
Then all of the URLs in your HTML can just be this:
<img src="images/example.png" />
Link To Image
You can do like this (using setInterval to detect opened window loaded, then write your help information , url must be same domain):
var w = window.open("http://baseUrl.com")
var writeAsserts = function ()
{
if (w.document.body.childNodes.length > 0) {
clearInterval(interval);
var div = w.document.createElement("div")
div.innerHTML = "<span>help</span>";
w.document.body.appendChild(div)
}
}
var interval = setInterval(writeAsserts,10)

javascript - Fill the value attribute of an input box

I am trying to make a simple webapp.
I want to put data from the main page into an input box on another window/tab but the input box is always empty when I'm opening it.
Here's the code:
global.js
function showUserInfo(event) {
// Prevent Link from Firing
event.preventDefault();
var _id = $(this).attr('rel');
var arrayPosition = userListData.map(function(arrayItem) { return arrayItem._id; }).indexOf(_id);
// Get our User Object
var thisUserObject = userListData[arrayPosition];
window.open('http://localhost:3000/editrecord', 'window', 'width=500,height=400');
var fName = thisUserObject.cName
$("#inputecName").attr('value', fname);
Running this would open the 'editrecord' window and the data I am trying to get should be in the input box in 'editrecord' page.
editrecord.jade
#editBox
fieldset
input#inputecName(type='text', placeholder='Customer Name', width = '50%')
br
button#btnEditRec(type='submit') Update Record
Thank you in advance.
js at Question attempts to set the value of an element at a separate document
$("#inputecName").attr('value', fname);
from the current document, without referencing that the element is within a separate document at a separate window.
You can use sessionStorage to access Storage object between browsing contexts, or window objects, that have same origin; utilize .ready() to check sessionStorage when editrecord.html is opened in browser and the document is loaded.
At original html document global.js
<script>
sessionStorage.setItem("id", 123);
var w = window.open("editrecord.html", "w");
</script>
at editrecord.html
<head>
<script>
$(document).ready(function() {
if (sessionStorage.id) {
$("#inputecName").val(sessionStorage.getItem("id"))
}
})
</script>
</head>
<body>
<input type="text" id="inputecName" />
</body>
plnkr http://plnkr.co/edit/7TRQOPYPX4bMpxr6pjyX?p=preview
You can send data via URL like,
Next page
By JS or Server side script you can fetch the data from URL and use it,
You can do like this one
var childWindow = window.open('http://localhost:3000/editrecord', 'window', 'width=500,height=400');
$(childWindow.document).load(function() {
var fName = thisUserObject.cName
$("#inputecName").attr('value', fname);
})
You can access the inputecName from chilld window using plain javascript
childWindow.document.inputecName

Window.open not displaying anything after adding iframe tag

I am trying to open a new window using window.open with dynamic content (for print functionality I am using this dynamic content).
Below dynamic HTML is not visible on window.open page where as in view source it is available. Please help me out why it is not getting displayed there.
Below is the code.
var win = window.open('', 'title', 'toolbar=0,location=0,menubar=0,resizable=yes,width=' + (screen.width - 100) + ', height=' + (screen.height - 150));
win.document.write("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>");
win.document.write("<html>");
win.document.write("<head><title>title</title>");
win.document.write('<script language="javascript" type="text/javascript">function printPage() { PrintDiv("defaultPrintBuffer"); }<\/script>');
win.document.write('</head>');
win.document.write('<body>');
win.document.write("<iframe width='560' height='315' id='defaultPrintBuffer2' name='defaultPrintBuffer2'>");
win.document.write(iframeContent);
win.document.write("</iframe>");
win.document.write('</body>');
win.document.write("</html>");
win.document.close();
win.focus();
win.printPage();
Since you mention that you're trying to implement printing, I'll add how I solved this problem in an answer instead of a comment, so the code is more readable.
Basically I made an empty (but valid) html page and just insert nodes into that page before printing it. This avoids the use of document.write and iframes, which are considered bad practice in alot of cases. If you really want to use an iframe, just add the iframe to the print page html and append your content to that node instead of to the body.
var data = $('myPartOfPageSelector'),
printPage;
if (!data || !data.length) alert('Nothing to print.');
else {
printPage = window.open('resources/print.html');
setTimeout(function() {
printPage.document.body.innerHTML = data.innerHTML;
printPage.print();
printPage.close();
}, 100);
}
The iframe tag doesn't show the content that you put in it, you have to load a page in the iframe.
You could use a script to put content in the iframe:
win.document.write("<iframe width='560' height='315' id='defaultPrintBuffer2' name='defaultPrintBuffer2'>");
win.document.write("</iframe>");
win.document.write("<script type='text/javascript'>var doc = document.getElementById('defaultPrintBuffer2').contentWindow.document;doc.open();doc.write('" + iframeContent.replace("'","\\'").replace("\\","\\\\") + "');doc.close();</script>");
Note that the content should be a complete HTML document in itself.

Can Zombie.js/Phantom.js be used to get HTML of newly open window by window.open?

I am trying to get html of newly open window after activating a link that uses javascript by zombie.js.
Here is the html code
<html>
<head>
<script type="text/javascript">
function newin(id)
{
var url="page.php?id="+id;
window.open(url,id,"toolbar=no,location=top,directories=no,status=no,scrollbars=yes,hscroll=no,resizable=yes,copyhistory=no,width=1025,height=1250");
}
</script>
</head>
<body>
<div>
123<br/>
234<br/>
345<br/>
</div>
</body>
The Script I am using is:
var Browser = require("zombie");
var browser = new Browser();
browser.visit("http://localhost:8000/testpage.html", function () {
browser.wait(function(){
var selector = "a[href*='newin']";
var elements = browser.queryAll(selector);
for (var e=0;e<elements.length;e++){
browser.clickLink(elements[e],function(){
browser.wait(function(){
console.log(browser.html());
});
});
}
});
});
I am not able to get HTML of any window.Any ideas what is wrong in this code ? Or is this possible with phantomjs??
Finally I come to know that if a link contains JavaScript directly in the href or action, Zombie seems to understand that as opening a new page like a normal hyperlink would. While the JavaScript is still executed correctly, the DOM is lost as a result of Zombie trying to load the invalid target as a new page.
A problematic link would be e.g.
test
There’s no support for javascript:links, it is still an open issue:
https://github.com/assaf/zombie/issues/700

Unable to persist header like Facebook

I am currently a beginner JavaScript learner. I was trying some special code logics found on various top websites like Facebook. One of them I found here: How does Facebook keep the header and footer fixed while loading a different page?. But I am unable to execute it properly. Following is my code:
<html>
<head>
</head>
<body>
<div id="header">TEST HEADER
SAMPLE</div>
<p>OUTSIDE</p>
<script type='text/javascript'>
var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');
for (var i = 0, l = headerLinks.length; i < l; i++) {
headerLinks[i].onclick = function () {
var href = this.href;
//Load the AJAX page (this is a whole other topic)
loadPage(href);
//Update the address bar to make it look like you were redirected
location.hash = '#' + href;
//Unfocus the link to make it look like you were redirected
this.blur();
//Prevent the natural HTTP redirect
return false;
}
}
</script>
</body>
</html>
Please tell me what I am doing wrong?
Actually the motive of my code is not just to persist header on a page but also when navigating to other page. The header should not reload when navigated to other page.
Solution from the answer by Bill F.:
Forgot to define loadPage() function:
<script type="text/javascript">
function loadPage() {
document.getElementById("content").innerHTML = '<object type="type/html" data="sample2.htm" ></object>';
}
</script>
You haven't defined the function loadPage is what you're doing wrong. Presumably, that function will use AJAX to retrieve a page's contents, whether in JSON, HTML, XML, CSV, whatever.
You can keep the position of a div fixed even while scrolling using position:fixed
#header
{
position:fixed;
}
i have managed to do it properly all you need to do is create 2 seperate container divs,1 for the nav bar(which you want to remain) and 2 for the content which you want changed then simply retrieve the data from an external page
CODE representation
<div class="container_for_persistent_nav-bar">
</div>
<div class="container_for_divs_that_are_not_persistent">
</div>
then just bind a click event to links that will,1.on click clear the div container for NON_PERSISTENT DIVS and then,2.load the divs from a separate page

Categories

Resources