This question already has answers here:
JavaScript require() on client side
(14 answers)
Closed 7 months ago.
I am trying to follow this guide: https://github.com/javascript-obfuscator/javascript-obfuscator
Because I want to obfuscate my javascript.
I tried this but it returns an error: require() is not defined
<script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
<script>
var JavaScriptObfuscator = require('javascript-obfuscator');
var obfuscationResult = JavaScriptObfuscator.obfuscate(
`
function hi() {
console.log("Hello World!");
}
hi();
`,
{
compact: false,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 1,
numbersToExpressions: true,
simplify: true,
stringArrayShuffle: true,
splitStrings: true,
stringArrayThreshold: 1
}
);
console.log(obfuscationResult.getObfuscatedCode());
</script>
I also tried this but it also returns an error: obfuscate() is not defined
<script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
<script>
var obfuscationResult = obfuscate(
`
function hi() {
console.log("Hello World!");
}
hi();
`,
{
compact: false,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 1,
numbersToExpressions: true,
simplify: true,
stringArrayShuffle: true,
splitStrings: true,
stringArrayThreshold: 1
}
);
console.log(obfuscationResult.getObfuscatedCode());
</script>
Does anyone know how to fix this, please? Thanks
<script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
<script>
const obfuscationResult = JavaScriptObfuscator.obfuscate( // Change 'obfuscate' to 'JavaScriptObfuscator.obfuscate'
`
function hi() {
console.log("Hello World!");
}
hi();
`, {
compact: false,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 1,
numbersToExpressions: true,
simplify: true,
stringArrayShuffle: true,
splitStrings: true,
stringArrayThreshold: 1,
}
)
console.log(obfuscationResult.getObfuscatedCode())
</script>
Related
I've come to the community to ask for help since I have been facing this problem for the last few days and can't seem to find any answers on the topic.
I've just converted my fully working HTML (with scripts) to React and everything seems to work apart from the scripts. I've tried loading them in the main index.html, as helmets, in the JS page itself, and nothing seems to work. Currently this is what my code looks like [IN THE INDEX.HTML FILE]
```<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="../src/pageScript.js" async defer></script>
<script src="../js/scripts.min.js" async defer></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" async defer></script>
<script type="text/javascript">
$(document).keyup(function(e) {
if (e.key === "Escape") {
$('.modal').removeClass('modal-show');
$('.content').removeClass('content-blurred');
$('body').removeClass('no-scroll');
}
});
$(function(){
// Provider card slider
$('.slider').flickity({
pauseAutoPlayOnHover: false,
prevNextButtons: false,
cellAlign: 'center',
draggable: false,
freeScroll: false,
wrapAround: true,
pageDots: false,
autoPlay: 3000,
});
// Imbox zero slider
$('.zero-slider').flickity({
pauseAutoPlayOnHover: false,
prevNextButtons: false,
cellAlign: 'center',
freeScroll: false,
wrapAround: false,
draggable: false,
pageDots: false,
autoPlay: 3000,
fade: true,
});
// Open & close modal
$('.modal-toggle').click(function(){
$('.modal').toggleClass('modal-show');
$('.content').toggleClass('content-blurred');
$('body').toggleClass('no-scroll');
});
// Reserve username form
$(".form").submit(function(e) {
e.preventDefault();
var $form = $(this);
$.post($form.attr("action"), $form.serialize()).then(function() {
$('.form-content').addClass('form-content-hide');
$('.success').addClass('success-show');
});
});
// Save user's first name
$(".form").submit(function(e) {
e.preventDefault();
var value = $("#firstName").val();
$('.first-name').text("Thank you," + " " + value + "!");
});
// Feather icons
feather.replace()
// ScrollReveal
ScrollReveal().reveal('.hero, .title, .screen, .features, .cards, .zero-slider', {
distance: '40px',
duration: 2000,
mobile: false,
reset: false,
opacity: 0
});
});
</script>
</body>```
In my website console, I get the errors: Uncaught SyntaxError: Unexpected token '<' (at pageScript.js:1:1)
&
scripts.min.js:1 Uncaught SyntaxError: Unexpected token '<' (at scripts.min.js:1:1)
&
Uncaught ReferenceError: $ is not defined
Any support will be greatly appreciated!
The error detailed Uncaught Error: no element is specified to initialize PerfectScrollbar
version: perfect-scrollbar v1.5.3
Error from my web browser console
pscroll.js
(function ($) {
"use strict";
*const ps = new PerfectScrollbar(".app-sidebar", {
useBothWheelAxes: true,
suppressScrollX: true,
suppressScrollY: false,
});
const ps1 = new PerfectScrollbar(".header-dropdown-list", {
useBothWheelAxes: true,
suppressScrollX: true,
suppressScrollY: false,
});
const ps2 = new PerfectScrollbar(".notifications-menu", {
useBothWheelAxes: true,
suppressScrollX: true,
suppressScrollY: false,
});
const ps3 = new PerfectScrollbar(".message-menu-scroll", {
useBothWheelAxes: true,
suppressScrollX: true,
suppressScrollY: false,
});
//P-scrolling
*})(jQuery);
pscroll-1.js
(function($) {
"use strict";
*const ps11 = new PerfectScrollbar('.sidebar-right', {
useBothWheelAxes: true,
suppressScrollX: true,
});
*})(jQuery);
I marked the error line into *.
After you posted the html, the only class I could find within the document was app-sidebar. Can you confirm you are not missing these classes within the html?
header-dropdown-list
notifications-menu
message-menu-scroll
sidebar-right
I'm working under particular circumstances and I am trying to get a slick slider carousel to run.
I get an error that $ is not defined.
Unless I use
window.onload = function(e){
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
};
The problem is, this slider is the first thing on the page, so I can not wait until everything is loaded, as it takes way too long.
I cannot change the order of my script tag or make sure the jQuery link is properly placed in the head an so on.
I know that other sliders on the page work just fine, and I also know that this particular one works fine once the proper files are loaded
There must be a way to check if $ is defined, keep checking until it is, and then run the script once confirmed.
use a waiter:
setTimeout(function wait(){
if(!window.$) return setTimeout(wait, 100);
// do stuff needing $ here:
console.info("$=", $);
}, 100);
var timer = setInterval(checkjQuery, 5000);
function checkjQuery() {
if(window.jQuery) {
clearInterval(timer);
callSlick();
console.log('jQuery is loaded');
return;
} else {
console.log('waiting');
}
}
function callSlick() {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
};
Similar to DanDavis solution
IMO the answer from #dandavis solves the issue the simplest.
I'd like to offer a way to make a simple "wait-er" re-usable and show how to integrate this with the code you shared.
A re-usable wait-er:
function waitUntil(getResource, callback) {
// Copied from #dandavis' answer
setTimeout(function wait() {
const resource = getResource();
if(!resource) return setTimeout(wait, 100);
callback(resource);
}, 100);
}
window.onload = function(e) {
waitUntil(function () { return window.$; }, function () {
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
});
};
Or if you wanted to, you could make it promise-based:
function waitUntil(getResource) {
return new Promise((resolve, reject) => {
setTimeout(function wait() {
const resource = getResource();
if(!resource) return setTimeout(wait, 100);
resolve(resource);
}, 100);
});
}
window.onload = function(e) {
waitUntil(function () { return window.$; })
.then(function () {
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
});
};
JavaScript :
$http.get("/getApexBody", config).then(function(response) {
document.getElementById("saveBtn").disabled = false;
document.getElementById("cleanBtn").disabled = false;
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if (globalEditor1) {
globalEditor1.toTextArea();
}
setTimeout(function(test) {
CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.auto
});
};
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
extraKeys: {
"Ctrl-Space": "autocomplete"
},
gutters: ["CodeMirror-lint-markers"],
lint: true,
mode: "text/x-apex"
});
globalEditor1 = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
This is my JS file, the ctrl-space works fine but I need, to implement autocomplete without any key bindings.
I have even tried this :
$http.get("/getApexBody", config).then(function(response) {
document.getElementById("saveBtn").disabled = false;
document.getElementById("cleanBtn").disabled = false;
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if (globalEditor1) {
globalEditor1.toTextArea();
}
setTimeout(function(test) {
/* CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.auto
});
};*/
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
/*extraKeys: {
"Ctrl-Space": "autocomplete"
},*/
gutters: ["CodeMirror-lint-markers"],
lint: true,
mode: "text/x-apex"
});
editor.on('inputRead', function onChange(editor, input) {
if (input.text[0] === ';' || input.text[0] === ' ') {
return;
}
CodeMirror.commands.autocomplete = function(editor) {
editor.showHint({
hint: CodeMirror.hint.auto
});
};
});
globalEditor1 = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
But this is not working.
Is there something I am missing here? How can I show live completion hints with codemirror?
I have used show-hints.js , and have modified it a bit to work for "." too.
Please help.
Use this function to autocomplete codeMirror without CTRL + Space.
Set completeSingle to false in the show-hint.js
editor.on("inputRead", function(instance) {
if (instance.state.completionActive) {
return;
}
var cur = instance.getCursor();
var token = instance.getTokenAt(cur);
if (token.type && token.type != "comment") {
CodeMirror.commands.autocomplete(instance);
}
});
$http.get("/getApexBody", config).then(function(response) {
document.getElementById("saveBtn").disabled = false;
document.getElementById("cleanBtn").disabled = false;
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if (globalEditor1) {
globalEditor1.toTextArea();
}
setTimeout(function(test) {
/*CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.auto
});
};*/
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
styleActiveLine: true,
extraKeys: {
".": function(editor) {
setTimeout(function() {
editor.execCommand("autocomplete");
}, 100);
throw CodeMirror.Pass; // tell CodeMirror we didn't handle the key
}
},
gutters: ["CodeMirror-lint-markers"],
lint: true,
mode: "text/x-apex"
});
editor.on('inputRead', function onChange(editor, input) {
if (input.text[0] === ';' || input.text[0] === ' ') {
return;
}
//CodeMirror.commands.autocomplete = function(editor) {
editor.showHint({
hint: CodeMirror.hint.auto
});
//};
});
globalEditor1 = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
This works, but after entering ".", it does gives methods of that particular variable but after entering few more matching words it again starts showing hints from original set of words.
for eg: isBatch and isAbort are two methods of System class.
When I start typing Sy... System comes up, then I type ".", them the two methods shows up isBatch and isAbort, but when I type isA instead of showing isAbort it starts showing hints from full list of words again.
Is there a way to avoid this too?
I'm in PHP website. Am trying to play the video automatically in the flowplayer. but it is not working and not giving any problem
$(function(){
// Top Stories videos
var topStoriesVideos = [
{
sources: [
{
type: 'video/mp4',
src: "https://storage.googleapis.com/web-assets/videos/Youarewatchingtrd/ad2/Ad2/Ad2-360p.mp4"
}
]
},
];
PlaylistApi = flowplayer("#tv", { autoPlay: true,
playlist: topStoriesVideos,
});
})
flowplayer(function (api, root) {
api.on("load", function () {
}).on("ready", function () {
history.replaceState({}, '', x[count++]);
});
api.bind("finish", function(){
});
$("#pause").click(function(){
api.pause(function(){
})
})
});
I tried clip:{autoplay: true,},
But it is also not working
It should be autoplay: true instead of autoPlay: true
The 'P' shouldn't be capitalized.