0

私はプロジェクトにAcuitySchedulingを使用しています。これはprototype.jsを使用しており、ページのヘッドとフッターに独自のカスタムコードを追加できます（iframeを介してサイトに提供されます）。私はprototype.jsに精通していないので、競合しない方法でjQueryを使用しています。このコードを追加するまで、jQueryコードとprototype.jsは正常に機能していました。

jQuery('body').html(jQuery('body').html().replace('an Appointment','a Session'));

他のjQueryコードやprototype.jsを壊すことなく、jQueryを使用してiframe内の特定の単語を置き換える方法を探しています。

ここで私のiframeのコンテンツを見ることができます：https ：//acuityscheduling.com/schedule.php？owner = 11134756

ソースを表示すると、下部に追加したコードが表示されます。

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<script language="javascript">
  jQuery.noConflict();

  jQuery(document).ready(function(){
    jQuery('body').on('click', '.time-selection', function() {
      jQuery('.continueAlert').hide();   
      jQuery('#rest').append('<p class="continueAlert">Please enter your name and contact info below.</p>');  
    });

    jQuery('body').html(jQuery('body').html().replace('an Appointment','a Session'));

  });
</script>

あなたが提供できるどんな助けにも感謝します！

4

1 に答える 1

2

特定の要素をターゲットにしたプロトタイプによって、いくつかのイベントリスナーが設定されているようです。

Event.observe(input, 'focus', function(){InputPrompt.focus(input);});
Event.observe(input, 'blur', function(){InputPrompt.blur(input);});
Event.observe(input, 'keypress', function(){input.label.hide();});

（もっとあるかもしれませんが、これらは私がすぐに見つけることができたものでした）

要素のinnerHTMLプロパティ（jQueryの検索/置換スニペットで行っていること）を置き換えると、ブラウザーは基本的に古いDOM要素を「破棄」して新しい要素を作成します。したがって、innerHTMLを更新した後にページに表示される要素は、以前に表示されたものと同じではありません。これは、イベントリスナーがアタッチされている要素です。そのため、すべてが「動作を停止」しました

2つのオプションがあります。

  1. 検索/置換スクリプトを更新して、テキストノードのみを更新します。これにより、イベントリスナーを持つ含まれている要素が混乱することがなくなります。

  2. 特定の要素を対象としないイベント委任を使用します。オプションの「selector」パラメータに細心の注意を払いながら、 Event.onをチェックしてください。何かのようなもの：

    document.on（'focus'、'input'、function（event、inputElement）{InputPrompt.focus（inputElement）;}）;

最初のオプションは、このページですでに確立されているコードへの邪魔にならないように感じます。

編集：これは、すべてのテキストノードを検索/置換するための非常に強引な方法です（プロトタイプを使用）。これを行うには、おそらくもっと効率的な方法があります。残念ながら、CSSセレクターを使用してテキストノードを照合することはできません。したがって、childNodeのすべてのフィルタリングなどが行われます。

document.body.select('*:not(script)').each(function(el){
  $A(el.childNodes).each(function(child){
    if (child.nodeType === 3) { // only get text nodes
      child.nodeValue = child.nodeValue.replace('an Appointment', 'a Session');
    }
  })
});
于 2012-09-18T16:10:18.157 に答える