概要

このページでは、エディターでのデザイン案作成時に使える、URLを取得し、動的なリンクを作る方法について記載します。
デザイン案にて、リンクを手動で記述してしまうと、固定化が起き、思わぬ不具合に繋がる場合がありますので、aタグの周りを編集したり、ページ内に存在するリンクを増設する際に参照ください。

「固定化」については、 デザイン案不具合の原因となる動的要素の固定化について をご確認ください。

※ 一例としてaタグのhrefで説明しておりますが、inputタグのtypeやvalue、divタグのonclickなどその他の編集にも有効な編集方法になります。

コンテクストメニュー「HTMLを編集」を利用する際の注意点

UI エディターの HTML を編集 機能を利用する際、対象の要素内に、リンク (<a> タグ) を含む場合、編集を開始した時点のリンク先 (href 属性) を、デザイン案の JavaScript コードに記録します。

対象サイトがそのリンク先を動的に変更している場合、
デザイン案描画時に、そのリンク先で上書きをしてしまう問題が発生します。

$("#registration").html("<p>今すぐ<a href=\"/regist?track_id=1234\">会員登録</a></p>")

仮に上記の様なコードで、対象サイトが track_id パラメータの値を動的に生成している場合、1234 に固定されてしまいます。

対応方法

この問題に対応するために、オリジナルのリンク先を参照する様に UI エディター左下にある、JavaScript タブを開き、コードを修正することで、対応が可能です。

$("#registration").html("<p>今すぐ<a href=\"" + $("#registration a").attr("href") + "\">会員登録</a></p>")

コードの解説

$("対象のaタグ").attr("href");

このコードはaタグの、「href属性」に記述されている情報を取得するものです。
こうすることで、href属性に指定されているリンクが動的に変わっても、その時その時の値を取得し、反映することができます。

href属性以外にも、()内に記述されている情報を変更すると、それに対応した情報が取得できます。

• .attr("style") –> 要素に設定されたstyle(CSS)情報を取得できます
• .attr("onclick") –> 要素に設定されたonclick情報を取得できます