Пользуюсь сайтом написаном на javascript
Можно ли както узнать url и заходить через него в интересующиеся разделы напрямую.
Просто блок div c классом
Класс js-pagination-item
div.js-pagination-item
.// wait dom loaded
document.addEventListener('DOMContentLoaded', () => {
// observer
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach((node) => {
// target element
if (node.nodeType === 1 && node.classList.contains('js-pagination-item')) {
// print in the console log
console.log('Detected element!');
}
});
}
});
});
// start
observer.observe(document.body, {childList: true, subtree: true});
});
Результат интересует как behance. Когда при выборе категории меняется страница работ, url из "behance.ru" превращается "behance.ru/kate", но визуально нет переадресации на новую страницу.
// listeners
document.querySelector('.showDivan').addEventListener('click', () => filter('divan'));
document.querySelector('.showShkaf').addEventListener('click', () => filter('shkaf'));
document.querySelector('.showAll').addEventListener('click', () => filter('all'));
// filtering
const filter = category => {
const items = document.querySelectorAll('.product');
items.forEach(item => {
item.style.display = category === 'all' || item.classList.contains(category) ? 'block' : 'none';
});
// change url
history.pushState({}, '', `/category/${category}`);
}
const clickTargetElement = document.querySelector('.hiking__about_item_img');
const imageConfigurations = {
primaryImage: {
htmlElement: document.querySelector('.img1'),
sourcePaths: ['img/about_hiking/1.png', 'img/about_hiking/2.png'],
altTexts: ['House and mountains in the background', 'Snowy mountains']
},
secondaryImage: {
htmlElement: document.querySelector('.img2'),
sourcePaths: ['img/about_hiking/1.png', 'img/about_hiking/2.png'],
altTexts: ['House and mountains in the background', 'Snowy mountains']
}
}
const toggleImageAttributes = ({htmlElement, sourcePaths, altTexts}) => {
const isPrimarySource = htmlElement.getAttribute('src') === sourcePaths[0];
const indexToUse = isPrimarySource ? 1 : 0;
htmlElement.setAttribute('src', sourcePaths[indexToUse]);
htmlElement.setAttribute('alt', altTexts[indexToUse]);
}
clickTargetElement.addEventListener('click', () => {
Object.values(imageConfigurations).forEach(toggleImageAttributes);
});
result
и end
, и перезапускать SpeechRecognition:const rec = new SpeechRecognition();
rec.addEventListener('result', () => {
// code
});
rec.addEventListener('end', () => recognition.start());
rec.start();
как принудительно его включить чтобы не отключался пока страница открыта?
при повторном использовании recognizer.start() - появляется диалоговое окно браузера спрашивающее о микрофоне - как этого избежать?
можно ли отключить это сообщение?
Существуют ли браузерные расширения для автоматического решения данной капчи?
Меня эта капча настолько бесит, что я даже готов потратить время и написать свое расширение для обхода, лишь бы было внешнее API для ее решения.
Как нужно вызывать js-функцию, чтобы она брала данные с той формы которую отправили? И как передать через ajax или ID, или Class формы?
<button type="submit" class="button">Отправить</button>
async function sendForm(form) {
const data = {
name: form.querySelector("input[name='name']").value,
email: form.querySelector("input[name='email']").value,
phone: form.querySelector("input[name='phone']").value,
message: form.querySelector("textarea[name='message']").value,
formId: form.id,
formClass: form.className
}
try {
const response = await fetch('php/send.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
});
if(response.ok) {console.log('Success send form')}
else console.log('Error send form', response);
}
catch(error) {console.log('Error: ' + error.message)}
}
document.querySelector('#form1').addEventListener('submit', (e) => {
e.preventDefault();
sendForm(event.target);
});
document.querySelector('#form2').addEventListener('submit', (e) => {
e.preventDefault();
sendForm(event.target);
});
В зависимости от формы нужно в PHP-скрипте менять тему письма.
$json = file_get_contents("php://input");
$data = json_decode($jsonData, true);
// get formId and formClass
$id = $data['formId'];
$class = $data['formClass'];
// this change type email message
button.style.background = linear-gradient(to right, ${color} ${currentWidth}px, transparent ${currentWidth}px);
button.style.background = `linear-gradient(to right, ${color} ${currentWidth}px, transparent ${currentWidth}px)`;
Какие есть способы убрать эту лазейку ?
import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
function App() {
const {getUser, user, setUser} = useUser();
return (
<Router>
<Routes>
<Route path="/" element={<LoginForm user={user} getUser={getUser}/>}/>
<Route path="login" element={<LoginForm user={user} getUser={getUser}/>}/>
<Route path="dashboard/*" element={<PrivateRoute user={user}><DashboardRoutes user={user}/></PrivateRoute>}/>
</Routes>
</Router>
);
}
export default App;
const DashboardRoutes = ({user}) => (
<Routes>
<Route path="/" element={<Dashboard user={user}/>}/>
<Route path="acts" element={<ActsPage user={user}/>}/>
</Routes>
);
const PrivateRoute = ({user, children}) => {
if(localStorage.getItem('token')) {
return children;
}
return <Navigate to="/login"/>;
}
DashboardRoutes()
можно добавлять вложенные роуты. Я не знаю с какой стороны уже подступиться и как делать такой эффект. Я пробовал вешать position: sticky на блок и определять высоту родительского блока. Но это работает при медленном скролле, при быстром блок пролетает не успевая закончить слайдер.