I'm building a Google Chrome extension to change all links on the current page. For this I added a simple .js to the extension.
In this file I have this part of code:
const links = document.getElementsByTagName("a");
for (let i = 0; i < links.length; i++) {
const link = links[i];
console.log('link: ' + link);
}
When I run this code on the page: https://www.toegankelijkheidsverklaring.nl/register I get all the links from the Naam column in my console and none of the links from the verklaring column. And the links from the second column are the ones I need. How is this possible? What am I doing wrong?
Related
I am struggling to get my code to display in HTML. I know I am probably missing something really simple, but I am stuck.
I have an Angular 7 app. I want to retrieve the xlsx data (worksheet) and display it in HTML. Simple right? My issue is that all the examples are in browser js and I need to retrieve it from a component. Here's the kicker, I already have the method and can print out json and html via console. log, but cannot find how to return it to an editable grid in HTML.
component.ts
fileUpload() {
let fileReader = new FileReader();
fileReader.onload = (e) => {
this.arrayBuffer = fileReader.result;
var data = new Uint8Array(this.arrayBuffer);
var arr = new Array();
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, { type: "binary" });
var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
console.log(XLSX.utils.sheet_to_json(worksheet, { raw: true }));
console.log(XLSX.utils.sheet_to_html(worksheet));
}
fileReader.readAsArrayBuffer(this.file);
}
html
<input type="file" style="display: inline-block;" (change)="incomingfile($event)" placeholder="Upload file" accept=".xls,.xlsx,.ods">
Upload
Currently I can retrieve any workbook/worksheet, but I simply cannot find how to return it to a ui grid of some sort from the .ts file.
I have been through numerous tutorials including ui-grid, ng-grid and https://redstapler.co/sheetjs-tutorial-convert-excel-html-table/
I appreciate I am probably being a dumbass, but any help would be appreciated. I cannot use a commercial component and simply need to render this in an editable table on my html page. I will then look at changing column headers and exporting the file via the backend SpringBoot REST to Mongo (all working)
I am aware that there are numerous similar questions on SO, but the working examples do not seem to display the data(even without any errors). Could be a versioning error etc. I also tried ui-grid, but came up with this issue: 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'. The example here is however also in .js and not via a typescript component: parameter is not of type 'Blob'
I am simply not able to bind the output to the HTML
I'm trying to find an element using selenium-webdriver with mocha in node.js. I'm doing pretty well but I have problem with a particular Google page that has poorly formatted HTML (many tags are not closed). Selenium doesn't like this. This is the standard Google click on your profile to sign in page. Here is an HTML sample. How do I wait for the page to load with my name and click on it? The only tag that seems to be closed is the li.
<div class="vdE7Oc f3GIQ"><p role="presentation"
class="wpW1cb">My Name<p class="uRhzae" role="heading"
aria-level="2" data-email="myemail#example.com"
>myemail#example.com</div></div></li>
Here's a list of things I've tried (among many others):
var profile = await driver.wait(until.elementLocated(By.partialLinkText("My Name")));
var profile = await driver.findElement(By.partialLinkText("My"));
var profile = await driver.findElement(By.xpath("//*[contains(., 'My Name')]"));
var profile = await driver.wait(until.elementLocated(By.css("p[email='myemail#example.com']")));
var profile = await driver.wait(until.elementLocated(By.xpath("//*[contains(., 'My Name')]")));
var profile = await driver.wait(until.elementLocated(By.partialLinkText("My")));
var profile = await driver.wait(until.elementLocated(By.xpath("//p[#email='myemail#example.com']")));
As per the HTML you have shared to locate the element with text as myemail#example.com you can use the following solution:
var profile = await driver.wait(until.elementLocated(By.xpath("//div//p[#role='heading' and #data-email='myemail#example.com']")));
<script type="text/javascript">
//add an entry to the _spBodyOnLoadFunctionNames array
//so that our function will run on the pageLoad event
_spBodyOnLoadFunctionNames.push("rewriteLinks");
function rewriteLinks() {
//create an array to store all the anchor elements in the page
var anchors = document.getElementsByTagName("a");
//loop through the array
for (var x=0; x<anchors.length; x++) {
//does this anchor element contain #openinnewwindow?
if (anchors[x].outerHTML.indexOf('#openinnewwindow')>0) {
//store the HTML for this anchor element
oldText = anchors[x].outerHTML;
//rewrite the URL to remove our test text and add a target instead
newText = oldText.replace(/#openinnewwindow/,'" target="_blank');
//write the HTML back to the browser
anchors[x].outerHTML = newText;
}
}
}
</script>
I have this code I put in the seattle.master file before Then in quick launch when I edit links I put #openinnewwindow after the website address. On "try link" this opens the website right. My problem is when I save it. And click the link it does not open in a new window. Any ideas why this might be happening?
I realized for this code to work that I needed Publishing enabled.
I have requirement where client wants to customize the items in quick launch for only certain
pages.So, I want to change the items in the quick launch with some other items for a few pages.(Not about cahnging the style of quick launch. Its about the replacingthe content in quick launch)
I hope using CEWP, I can achive this.But I am not much aware how to do it.
You can have two approachs here:
1) creating a webpart to replace the quicklaunch: This way you can read the Navigation from SPWeb, and build it your own.
2) Using jQuery to change the html loading the page. In this approach, I would apply a 'display:none' to quicklaunch, make the changes in html, and then 'display:block' back. The con in this solution is that you must rely on the names/titles/urls of the items, so if an admin changes, it could break it.
I had followed following steps to achive the goal
1.. Added a CEWP in the page
Created a text file with Following script and added it to shared dcouments
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function startClock(){
var div= document.getElementById('s4-leftpanel-content');
var spans= div.getElementsByTagName('span');
for (index = spans.length - 1; index >= 0; index--) {
spans[index].parentNode.removeChild(spans[index]);
}
var urls= div.getElementsByTagName('a');
for (index = urls.length - 1; index >= 0; index--) {
urls[index].parentNode.removeChild(urls[index]);
}
var pTag = document.createElement('p');
pTag.innerHTML = "HR Report";
div.appendChild(pTag);
var aTag = document.createElement('ul');
div.appendChild(aTag);
var newLi = document.createElement('li');
aTag.appendChild(newLi);
var a= document.createElement('a');
a.setAttribute('href',"url");
a.innerHTML = "report2";
newLi.appendChild(a);
//do onload work
}
if(window.addEventListener){
window.addEventListener('load',startClock,false); //W3C
}
else{
window.attachEvent('onload',startClock); //IE
}
</script>
enter code here
Paste the url text file in shared documents in CEWP as content link(Edit web part >>content link>>paste url)
Now, existing items in the Quick Launch is removed and new items are added
I have done a few searches for this issue and I have come up empty handed. I hope somebody can clarify things for me and point me in the right direction.
Problem: I have a page that displays a list of results after submitting a search form. When a user clicks on one of the results, the browser goes to a new page showing more information about the result. When the user then clicks the 'back' button to go pack to the results, my browser reloads the page and shows the top of the page instead of the result that was last clicked.
Goal: What I would like is this: when the user click's the back button, the browser should go back to the previous page and, instead of showing the top of the page, show the page at the previous position.
Solution: I am completely lost as how this result can be achieved. Could it have something to do with javascript, or headers sent to the browsers, maybe something to do with caching.
If this is incredibly important, I'd suggest investigating the following:
add ids to each outgoing link
use JavaScript to capture the onClick for the links
when a link is clicked, redirect the user to that link's id fragment identifier, then link out as desired
When the user hits the back button, they'll return to that specific link, e.g. http://www.example.com/#link27 instead of http://www.example.com/
You may be able to get some ideas from here:
Stack Overflow:
Is it possible to persist (without reloading) AJAX page state across BACK button clicks?
YUI Browser History Manager
Ajax Patterns: Unique URLs
You can use javascript and jquery to set the scroll position of the window and cookies to store the position to scroll to. In the javascript of the page with the search results you could have something like this:
var COOKIE_NAME = "scrollPosition";
$(document).ready( function() {
// Check to see if the user already has the cookie set to scroll
var scrollPosition = getCookie(COOKIE_NAME);
if (scrollPosition.length > 0) {
// Scroll to the position of the last link clicked
window.scrollTo(0, parseInt(scrollPosition, 10));
}
// Attach an overriding click event for each link that has a class named "resultLink" so the
// saveScrollPosition function can be called before the user is redirected.
$("a.resultLink").each( function() {
$(this).click( function() {
saveScrollPosition($(this));
});
});
});
// Get the offset (height from top of page) of the link element
// and save it in a cookie.
function saveScrollPosition(link) {
var linkTop = link.offset().top;
setCookie(COOKIE_NAME, linkTop, 1);
}
// Boring cookie helper function
function getCookie(name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(name + "=");
if (c_start != -1) {
c_start = c_start + name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end ==- 1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
// Another boring cookie helper function
function setCookie(name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = name + "=" + escape(value) +
((expiredays==null) ? "" : ";expires=" + exdate.toGMTString());
}
This assumes your search result links have class="resultLink".
The first part of the answer is that you use anchors to land on a page somewhere other than the top. So if I have this in my html at the bottom of my page:
<a name="f"></a>
then I can have the user land there by appending the anchor to the end of he url:
http://www.bullionvalues.com/glossary.aspx#f
So, if you are talking about ASP.Net you can place the anchor in a hidden field on the page info page and then read it from the search page by using: Page.PreviousPage property.
protected void Page_Load(object sender, EventArgs e)
{
if (Page.PreviousPage != null)
{
Object o = PreviousPage.FindControl("hfAnchor");
if (o != null)
{
HiddenField hf = o as HiddenField;
Response.Redirect(Request.Url+"#"+hf.Value);
}
}
}
I fixed this issue by sending headers with php. This was my solution:
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: store, cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", FALSE);
Thanks to everybody for the help.