「ページファイル埋め込み」の版間の差分

提供:sufeeWiki
ナビゲーションに移動 検索に移動
編集の要約なし
 
(同じ利用者による、間の26版が非表示)
1行目: 1行目:
<div class="warnning">
※この設定は重大な脆弱性を発生させます。<br>
取扱には十分に気をつけてください。<br>
また、充分に必要ではない記事に埋め込むことは避けてください。<br>
※このスクリプトは、デスクトップ版のみ動作できます。
</div>
== script埋め込み ==
== script埋め込み ==
=== ul リストを追加します ===
===1. ul リストを追加します ===
# id名を Script-files で設定します。
====1.1 id名を Script-files で設定します。====
ul id="Script-files"
<syntaxhighlight lang="html">
# liにjavascriptを追加します.
<ul id="Script-files"></ul>
## アップロードしたJavaScriptファイル
</syntaxhighlight>
li type="file" 「アップロードしたファイルURL」 /
====1.2 liにjavascriptを追加します.====
## 埋め込むJavaScript
=====・アップロードしたJavaScriptファイルの場合 =====
li type="inner"
<syntaxhighlight lang="html">
function hello(){
<li type="file">「アップロードしたファイルURL」</li>
  alert("helloworld");
</syntaxhighlight>
}
=====・埋め込むJavaScript=====
/
<syntaxhighlight lang="html">
# クリックや値変更でトリガーをするためには以下を追加します.
<li type="inner">
## 動かしたいidやclassを指定しどのメソッドを呼ぶか指定する
    function hello(){  
onEnable.addMethod("#id名",メソッド);
    alert("helloworld");
# 動かしたいidやclass名のタグに対してどの操作か指定する
    }  
## クリックの場合
</li>
p id="id名" data-click="true" >
</syntaxhighlight>
## 値の変動をキャッチ
p id="id名" data-change="true" >


# 最後に反映をする
====1.3 クリックや値変更でトリガーをするためには以下を追加します.====
li type="inner"
*動かしたいidやclassを指定しどのメソッドを呼ぶか指定する
onEnable.makeStandbyMethod();
<syntaxhighlight lang="javascript">
/ li
onEnable.addMethod("#id名",メソッド);
を追加し完成!!
</syntaxhighlight>


<ul id="Script-files">
===2. 動かしたいidやclass名のタグに対してどの操作か指定する ===
====・クリックをキャッチ====
<syntaxhighlight lang="html">
<p id="id名" data-click="true">
</syntaxhighlight>
====・値の変動をキャッチ====
<syntaxhighlight lang="html">
<p id="id名" data-change="true"></p>
</syntaxhighlight>
 
===3. 最後に反映をする===
<syntaxhighlight lang="html">
<li type="inner">
onEnable.makeStandbyMethod();
</li>
を追加し完成!!
</syntaxhighlight><ul id="Script-files">
<li type="inner">
<li type="inner">
function ok(){
function ok(){
57行目: 78行目:
<p class="script-click btn" data-click="true">クリックするとダイアログが出るよ!!</p>
<p class="script-click btn" data-click="true">クリックするとダイアログが出るよ!!</p>
</syntaxhighlight><p class="script-click btn" data-click="true">クリックするとダイアログが出るよ!!</p>
</syntaxhighlight><p class="script-click btn" data-click="true">クリックするとダイアログが出るよ!!</p>
== inputやbuttonで実装する ==
== inputやbuttonで実装する ==
#div要素を設置し idまたは,class名を設定。その後 data-属性を使用し ターゲットとなるタグ属性の設定を書き込む。
===1.div要素を設置し idまたは,class名を設定。その後 data-属性を使用し ターゲットとなるタグ属性の設定を書き込む。===
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<div data-tag="input" data-type="text" data-onchange=true" data-name="btn" id="btn-div"></div>
<div id="btn-div" data-tag="input" data-type="text" data-onchange=true" data-name="btn" data-placeholder="ここに入力すると??..."></div>
</syntaxhighlight>
</syntaxhighlight>
  なお設定するプロパティ名は以下に従う。<br>
  なお設定するプロパティ名は以下に従う。<br>
  https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
  https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
#先程のulリスト形式の呼び出しを使用しonEnableを呼び出す.<syntaxhighlight lang="html">
===2.先程のulリスト形式の呼び出しを使用しonEnableを呼び出す.===
<syntaxhighlight lang="html">
<ul id="Script-files">
<ul id="Script-files">
  <li type="inner">
  <li type="inner">
76行目: 99行目:
</syntaxhighlight>
</syntaxhighlight>


== 結果2 ==
== 動作例2 ==
<div data-tag="input" data-type="text" data-onchange="true" data-name="btn" id="div-btn"></div>
<div data-tag="input" data-type="text" data-onchange="true" data-name="btn" id="div-btn" data-placeholder="ここに入力すると??..."></div>
[[カテゴリ:JavaScript]]
[[カテゴリ:MediaWiki]]
[[カテゴリ:改造]]
[[カテゴリ:ヘルプ]]
[[カテゴリ:使い方]]
__インデックス拒否__

2022年2月17日 (木) 14:18時点における最新版

※この設定は重大な脆弱性を発生させます。
取扱には十分に気をつけてください。
また、充分に必要ではない記事に埋め込むことは避けてください。
※このスクリプトは、デスクトップ版のみ動作できます。

script埋め込み

1. ul リストを追加します

1.1 id名を Script-files で設定します。

<ul id="Script-files"></ul>

1.2 liにjavascriptを追加します.

・アップロードしたJavaScriptファイルの場合
<li type="file">「アップロードしたファイルURL」</li>
・埋め込むJavaScript
<li type="inner">
    function hello(){ 
     alert("helloworld");
    } 
</li>

1.3 クリックや値変更でトリガーをするためには以下を追加します.

  • 動かしたいidやclassを指定しどのメソッドを呼ぶか指定する
onEnable.addMethod("#id名",メソッド);

2. 動かしたいidやclass名のタグに対してどの操作か指定する

・クリックをキャッチ

<p id="id名" data-click="true">

・値の変動をキャッチ

<p id="id名" data-change="true"></p>

3. 最後に反映をする

<li type="inner">
 onEnable.makeStandbyMethod(); 
</li> 
を追加し完成!!
  • function ok(){ alert("OK"); } onEnable.addMethod(".script-click",ok); onEnable.makeStandbyMethod();
  • function inputAlert(){ alert(document.getElementsByName("btn")[0].value); } onEnable.addTag("#div-btn",inputAlert); onEnable.makeTag();

動作例

<ul id="Script-files">
 <li type="inner">
  function ok(){
   alert("OK");
  }
  onEnable.addMethod(".script-click",ok);
  onEnable.makeStandbyMethod();
 </li>
</ul>
<p class="script-click btn" data-click="true">クリックするとダイアログが出るよ!!</p>

クリックするとダイアログが出るよ!!

inputやbuttonで実装する

1.div要素を設置し idまたは,class名を設定。その後 data-属性を使用し ターゲットとなるタグ属性の設定を書き込む。

<div id="btn-div" data-tag="input" data-type="text" data-onchange=true" data-name="btn" data-placeholder="ここに入力すると??..."></div>
なお設定するプロパティ名は以下に従う。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

2.先程のulリスト形式の呼び出しを使用しonEnableを呼び出す.

<ul id="Script-files">
 <li type="inner">
  function inputAlert(){
   alert(document.getElementsByName("btn")[0].value);
  }
  onEnable.addTag("#div-btn",inputAlert);
  onEnable.makeTag();
 </li>
</ul>

動作例2