Блог

Главная - Вопросы по программированию - Я пытаюсь создать меню модов на веб-сайте с букмарклетом, но по какой-то причине оно не отображается

Я пытаюсь создать меню модов на веб-сайте с букмарклетом, но по какой-то причине оно не отображается

#javascript

Вопрос:

Итак, я пытался создать меню модов, чтобы взломать iReady в качестве букмарклета, я новичок в HTML, поэтому я начал с того, что сделал одну кнопку. Он отображается на главных страницах, но на уроках кнопка исчезает. Когда я выхожу из урока, кнопка отображается снова. Мой код:

 let c = document.createElement('div');
  c.innerHTML = `<button onclick="test()">test</button>`;
  document.body.appendChild(c);

да, я только что сделал кнопку, я пытаюсь заставить кнопку появиться первой.

Комментарии:

1. Я понятия не имею, как я уже работаю как веб-сайт, но похоже, что урок либо перекрывает главную страницу, либо заменяет ее. Если он накладывается на него, добавьте CSS div , чтобы установить его на position: absolute; z-index: 100000; или что-то столь же высокое, и посмотрите, сработает ли это. Если вам нужна дополнительная помощь, вам нужно будет предоставить примеры HTML и CSS страницы iReady при отображении урока.

2. @HereticMonkey да, спасибо, это сработало 😀

Ответ №1:

Может быть, вам нужно поместить код либо в функцию onload, либо в теги скрипта в конце текста, чтобы запустить его после загрузки страницы?

В голове:

 <head>
    <script>
        window.onload = function () {
            let div = document.body.appendChild(document.createElement('div'));
            let button = document.createElement('button');
            button.setAttribute('onclick', 'test()')
            button.innerHTML = 'test';
            div.append(button);
        }
    </script>
</head>

Или в теле:

 <body>
    <!-- some other html -->
    <script>
        let div = document.body.appendChild(document.createElement('div'));
        let button = document.createElement('button');
        button.setAttribute('onclick', 'test()')
        button.innerHTML = 'test';
        div.append(button);
    </script>
</body>

Ответ №2:

я нашел такую вещь, как меню модов, и оно делает кнопки, как вы пытаетесь сделать, и это букмарклет!

вот он:

 javascript:(function(){javascript: (function main() {
  /* I add random characters at the end of the ID so that it does not clash with any other ID's on the page */

  const ID =
    '--picture-in-picture-toolbar-8743fsfjkl9274g9832fkjdslfjksl7498247389'; /* Helper functions */
  const get = (selector, el = document) => el.querySelector(selector);
  const getAll = (selector, el = document) =>
    Array.from(el.querySelectorAll(selector));
  /* Remove our toolbar if it exists */ let _toolbar = get(`#${ID}`);
  if (_toolbar) {
    _toolbar.parent.removeChild(_toolbar);
  }
  /* create the toolbar */ const toolbar = document.createElement(
    'div'
  ); /* Set the toolbar's ID, so we can remove it later */
  toolbar.id = ID; /* Use shadow-dom as outlined here: https://developers.google.com/web/fundamentals/web-components/shadowdom */
  /* Inside shadow dom we don't have to worry about conflicting styles. */ const shadowroot = toolbar.attachShadow(
    { mode: 'open' }
  );
  shadowroot.innerHTML = `<style>#container {  z-index: 9999;  border: 1px solid #000;  border-radius: 3px;  padding: 0.7em;  position: fixed;  top: 0.5em;  right: 0.5em;  background-color: rgba(0,0,0,0.7);  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}button {  padding: 0.5em 0.7em;  border-radius: 3px;  box-shadow: none;  border: 2px solid #fff;  background-color: transparent;  color: #fff;  cursor: pointer;}button:hover {  background-color: white;  color: black;}</style><div id="container">  <button aria-label="click to alert" id="alert">    Click to Alert  </button> 
  <button onclick="myFunction()">Click me</button>
  <button onclick="myFunction()">Click me</button>
  <button onclick="myFunction()">Click me</button>
  
  <button aria-label="close" id="close">    x  </button></div>    `;
  
  
  get('#close', shadowroot).addEventListener('click', () => {
    const toolbar = get(`#${ID}`);
    if (toolbar) {
      toolbar.parentNode.removeChild(toolbar);
    }
  });
  const alertEl = get('#alert', shadowroot);
  alertEl.addEventListener('click', e => {
    alert('You clicked to alert');
  });
  document.body.appendChild(toolbar);
})();})();
Метки: ,