I want to inject some script after the page is loaded, but the script is not injected or maybe i write it wrong. And here is the code that I want to inject.
val script = "javascript:(function() { $('.numberonly').attr('inputmode','numeric');}())"
and onPageLoaded
binding.webview.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView, url: String) {
isLoaded = true
Utility.dismissProgressDialog()
view.evaluateJavascript(script) {
Log.e("script", "onPageFinished: $it")
}
}
}
This is an example that I'm trying to add some attribute to an element, and I try this to text input. Does the script is correct to change an attribute, or what should I do without changing the Web Code directly?
Update
I try to add attributes by element ID, It can be added.
But when I try adding to the class, it's not added.
Here is the code
val script = "javascript: " +
"var berninis = document.querySelectorAll('.numberonly');" +
"for(var i = 0; i < berninis.length; i++) {" +
"berninis[i].setAttribute(\"inputmode\", \"numeric\");" +
"}"
and this is the code when I try using element ID
val script = "javascript:document.getElementById('form_userid').setAttribute(\"inputmode\", \"numeric\");"
Related
var range = this.quill.getSelection();
var value = prompt('please copy paste the image url here.');
if(value){
this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
}
I solved the problem of adding images by linking in the quill editor with the api code above. But I couldn't find how to add alt and title properties with the help of api. I can edit it later with the following javascript code, but I need to edit it at the image insertion stage.
if (e.target.tagName=='IMG') {
console.log(e.target.tagName)
var el = e.target;
el.setAttribute("title", "asdasdasd");
}
})
Also, when I add a or tag to the editor, it is surrounded by a p tag and cannot be edited. It puts everything in the p tag and doesn't allow tags like br. How can I solve these problems?
Sorry for the bad english.
There seems to be no easy and elegant way to do it. The API does not allow it (or I have not seen it) and the source code does not seem to be documented.
I propose this code while waiting for a better solution.
It is based on a solution to observe dynamically created elements. I have added the caption of the title and alt attribute.
To get the code to work, you will need to explain the following to your users:
They must write the title and alt in this format wherever they want to insert the image:
%title% A title %alt% An alternative text
Then, they must select that same:
%title% A title %alt% An alternative text
With that text selected they must click the image button and open the image.
Notice, at the moment, you cannot escape "%alt%", so you cannot use the "%alt%" expression within the value of an attribute.
Example:
%title% The title is before %alt% %alt% the %alt% attribute
This causes an unwanted alt attribute.
Paste this code after creating an editor.
BTW, it is only valid for the first editor that exists.
var FER_alt;
var FER_title;
function FER_callback(records) {
records.forEach(function (record) {
var list = record.addedNodes;
var i = list.length - 1;
for ( ; i > -1; i-- ) {
if (list[i].nodeName === 'IMG') {
if(FER_title.length > 0){
list[i].setAttribute('title',FER_title)
}
if(FER_title.length > 0){
list[i].setAttribute('alt',FER_alt)
}
}
}
});
}
var FER_observer = new MutationObserver(FER_callback);
var FER_targetNode = document.querySelector('.ql-editor')
FER_observer.observe(FER_targetNode, {
childList: true,
subtree: true
});
function FER_getTitleAlt(){
var selection = quill.getSelection();
var texto =quill.getText(selection.index,selection.length);
var titleE = texto.search("%alt%")
FER_title = texto.substr(7,titleE-7);
var titleI = titleE + 5
FER_alt = texto.substring(titleI)
}
var FER_imageboton = document.querySelector(".ql-image")
FER_imageboton.addEventListener("click",FER_getTitleAlt)
Instead of insertEmbed you can use getContents and setContents.
let delta = {
ops: [
{
attributes: {
alt: yourAltValue
},
insert: {
image: yourSrcValue
}
}]
};
let existingDelta = this.quill.getContents();
let combinedDelta = existingDelta.concat(delta);
this.quill.setContents(combinedDelta);
Extends Image blot and override the create method
const Image = Quill.import('formats/image');
class ImageBlot extends Image {
static create(value) {
const node = super.create(value);
if (typeof value === 'string') {
node.setAttribute('src', this.sanitize(value));
node.setAttribute('alt', this.sanitize(value).split('/').reverse()[0]);
}
return node;
}
}
Quill.register(ImageBlot);
In this example, we set alt attribute with image's basename
I quickly put together a small piece of code to fetch and modify a string from a class on a webpage (chrome extension).
The code works Fine on the first runtime, but if I navigate the webpage to a new company where the class text is changing, the code stops to work correctly (it returns the values from the first runtime)
If I refresh the page or open it up in a new tab it works fine again.
I am 100% new to javascript, I have no clue how to fix this.
Sidenote: Is there a way for me to ask the user a boolean question on runtime, and depending on the answer return either the partname or the finalpart string to the clipboard?
// content.js
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.message === "clicked_browser_action") {
var wholeName = document.getElementsByClassName('ng-binding ng-scope')[0].innerHTML;
var partName = wholeName.substring(0, 4)
var finalPart = "m" + partName.substring(0, 1) + "a" + partName.substring(2, 1) + "x" + partName.substring(3, 2) + "X" + partName.substring(3, 4)
copyStringToClipboard(finalPart);
}
}
);
function copyStringToClipboard(str) {
// Create new element
var el = document.createElement('textarea');
// Set value (string to be copied)
el.value = str;
// Set non-editable to avoid focus and move outside of view
el.setAttribute('readonly', '');
el.style = { position: 'absolute', left: '-9999px' };
document.body.appendChild(el);
// Select text inside element
el.select();
// Copy text to clipboard
document.execCommand('copy');
// Remove temporary element
document.body.removeChild(el);
}
I'm sort of new to JS and bookmarklets.
I'm modifying some existing code; which is written like this (I'm oversimplifying the actual code for the education purposes):
javascript: 1 && function(e) {
var t = "";
t += "<style>",
t += ".somestyle-header{ background-color: #0171C5 !important }",
t += "</style>",
t += '<div class="somestyle-header">Test</div>',
t += "";
e("body").append("<div id='something'> </div>"), e("#something").append(t)
}($myvariable);
Now, this currently works and it creates a DIV called "something" and then appends everything on variable "t" to it. In other words it adds whatever is on variable "t" to the HTML of the current site (given that the site has the $myvariable set somewhere).
I'm trying to do something similar, but I have the following questions:
How can I remove that 1 at the very begining of the function and make it work?
How can I make it work on every page?, regardless of the
$myvariable at the end being present or not.
Also, if someone can explain what that 1 at the very beginning and that $myvariable at the very end are doing and why this code doesnt work if I remove any of those parts?
I was hoping I can do something like this:
javascript: (function() {
if (!($ = window.jQuery)) {
script = document.createElement( 'script' );
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
script.onload=launchTheSplash;
document.body.appendChild(script);
}
else {
launchTheSplash(e);
}
function launchTheSplash(e) {
var t = "";
t += "<style>",
t += ".somestyle-header{ background-color: #0171C5 !important }",
t += "</style>",
t += '<div class="somestyle-header">Test</div>',
t += "";
e("body").append("<div id='something'> </div>"), e("#something").append(t)
}
}());
So that:
I check for the existence of JQuery
I launch my bookmarklet regardless of the existence of the $myvariable
But my code doesn't seem to work at all if I remove the 1 at the beginning or the $myvariable at the end. If I do that I get an Uncaught TypeError: e is not a function
Hope this is clear enough. Thanks in advance!
Edit:
I've tried the suggestion below:
javascript: (function() {
if (!($ = window.jQuery)) {
script = document.createElement( 'script' );
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
script.onload=launchTheSplash();
document.body.appendChild(script);
}
else {
launchTheSplash();
}
function launchTheSplash(e = $) {
var t = "";
t += "<style>",
t += ".somestyle-header{ background-color: #011515 !important }",
t += "</style>",
t += '<div class="somestyle-header">Test</div>',
t += "";
e("body").append("<div id='something'> </div>"), e("#something").append(t);
}
}());
But it doesnt seem to work on certain pages; for example -if I try to run the bookmarklet in www.apple.com website it comes back with Uncaught TypeError: e is not a function
Any ideas appreciated! Thanks again!
In order to execute functions immediately, you can use IIFE(https://developer.mozilla.org/en-US/docs/Glossary/IIFE). The correct syntax to execute functions immediately is -
(function(text){
console.log(text);
})('Hello World')
In your case e is supposed to be jquery element, so whenever you are calling launch function you should pass $ in it.
Take a look at this snippet - https://jsitor.com/E8JW18YD-
Im having an issue with setting my bacground image by using an external js code.
this is the code of the js:
$(document).ready()
{
mazdaArr = new Array();
for (i=1;i<6;i++)
{
mazdaArr[i-1]= new Image();
mazdaArr[i-1].src = 'mazda/mazda'+[i]+'.jpg';
}
$('mainContent').css('background-image','url(/mazda/mazda4.jpg)');
$('mainContent').css('background-image', 'url(' + mazdaArr[3].src + ')');
console.log(mazdaArr[3].src);
}
everything works fine but the css attr, since I can see at the console the right link and when I click it, the image will open up in new tag. by that i guess the jquery call from html page is fine.
cant find what goes wrong here...
A few things:
Looks like your string is concatinating an array literal, and not the integer i. So 'string'+[]+'string' is effectively 'string' + new Array() + 'string'.
Your selector for mainContent needs to either be looking for a class or an ID so either .mainContent or #mainContent.
Finally, you don't need to instantiate a new Image since jQuery will just update the CSS of the element with a new string for the background-image property.
Try
$(document).ready(function() {
var mazdaArr = [],
i = 0;
for (i; i<5; i++) {
mazdaArr[i] = 'mazda/mazda'+ i +'.jpg';
}
$('#mainContent').css('background-image', 'url(' + mazdaArr[3] + ')');
console.log(mazdaArr[3].src);
});
What I'm trying to achieve:
Based on URL (ie., foo.com/item1), the div element "logoswap" receives a different class.
The following is the code I put together but it seems completely wrong. I'm not a JS pro by any means, XHTML/CSS is more my speed (some PHP)... I cannot use PHP, even if it is possible in PHP (and I know it is because I have a PHP version of what I need done already, but I can't call the PHP properly.
I'm really just trying to get a different logo to show up based on the directory/url... It doesn't have to be a background element called in by the CSS class necessarily, I just need a different image to load based on the aforementioned url variable...
$(function() {
var url = location.pathname;
if(url.indexOf('item1') > -1) {
document.getElementById("logoswap").className += " class1";
}
elseif(url.indexOf('item2') > -1) {
document.getElementById("logoswap").className += "class2";
}
elseif(url.indexOf('item3') > -1) {
document.getElementById("logoswap").className += "class3";
}
elseif(url.indexOf('item4') > -1) {
document.getElementById("logoswap").className += "class4";
}
elseif(url.indexOf('item5') > -1) {
document.getElementById("logoswap").className += "class5";
}
else {
document.getElementById("logoswap").className += "class1";
}
});
That's what I have... Ugly I'm sure.
That's why I'm here though, I definitely need some help.
Assigning CSS Class By URL Pathname
A jsfiddle has been setup for
this solution.
Here is a case for using numeric expressions if they are available. This does not apply to the above question.
$(function() {
var rgx = /item(\d+)$/,
url = location.pathname,
id = (rgx.test(url)) ? url.match(rgx)[1] : '1';
$("#logoswap").addClass("class" + id);
});
UPDATE:
In light of the new details you may need an array of values, these should be derived from or exactly equal to the class names you intend to use.
$(function(){
// my favorite way to make string arrays.
var matches = "brand1 brand2 brand3".split(" "),
url = location.pathname.match(/\w+$/)[0], // get the last item
id = matches.indexOf(url),
className = matches[(id > -1) ? id : 0];
$("#logoswap").addClass(className);
});
To make this work you will need a few things in place. I will assume that the paths will end in a number as we have outlined here. The default ends with 1. You will need the images to be accessible. You need to define the styles for each possibility.
CSS Setup
#logoswap {
height : 200px;
width : 200px;
}
.class1 {
background-image : url(/path/to/default.jpg);
}
.class2 {
background-image : url(/path/to/second.jpg);
}
.brand1 {
background-image : url(/path/to/brand/1/logo.jpg);
}
...
Without jQuery
if you do not have jQuery in your code you may need to use window.onload.
(function(){
var old = window.onload;
window.onload = function(){
old();
var r = /item(\d+)$/,
url = location.pathname,
id = (r.test(url)) ? url.match(r)[1] : '1';
document.getElementById('logoswap').className += "class" + id;
};
})()
I just want to take a moment here to
encourage anyone who is doing this
type of code to get used to Regular
Expressions and learn them. They are
far and away the most frequently used
cross language part of my development
arsenal.
There's nothing that wrong with what you have. You could tidy it up with something like below.
$(function() {
var url = location.pathname;
var logo = document.getElementById("logoswap");
var i = 6;
logo.className = "class1";
while(i--)
{
if(url.indexOf("item" + i) > -1) {
logo.className = "class" + i;
}
}
});
Hope this helps.
Using just HTML/CSS, you could add (or append via javascript) an id to the body of the page:
<body id="item1">
Then in your CSS, create a selector:
#item1 #logoswap {
// class1 CSS
}