

iframeの内の要素を取得してその要素がクリックされたiframeにz-
index:1が追加されるコードを書きたいです。下記のコードでは何も変化がありませんでした。  
教えてください。

[code]

    <iframe id="Hello" src="https://example.jp/header.php"></iframe>
    
    <script>
    
    // iframe要素を取得
    var iframeElem = document.getElementsByTagName('iframe');
    var iframeDocument = iframeElem[0].contentDocument || iframeElem[0].contentWindow.document;
    // iframeで読み込まれているページ内のIDname要素を取得
    var pElem = iframeDocument.getElementsById('sss')[0];
    //iframeで読み込まれているページ内のIDname sssがクリックされたらiframe.style.zIndex= 1を追加する
    $(document).on("click","sss",function(){
    iframe.style.zIndex= 1;
    });
    </script>
    
[/code]


CC BY-SA 4.0
2022-07-25T05:52:32.023
90182
2022-07-26T14:16:26.143
2022-07-25T06:02:03.437
3060
53411
question
javascript php laravel
iframeの内の要素を取得してその要素がクリックされたらcssを追加されるコードを書きたい

[code]

    $(document).on("click","sss",function(){
    
[/code]

これは、「iframeの外のドキュメントで`<sss>`タグがクリックされたら実行する」という意味になります。`pElem`
があるのですから、それを以下のように使う意図だったのではないでしょうか。

[code]

    pElem.addEventListener("click", function () {
    
[/code]

また、iframe のロードを待つ必要もあるでしょう。「var iframeDocument =
...」以降のコードすべてを次のように関数でくるんでください。

[code]

    iframeElem[0].addEventListener('load', function() {
        var iframeDocument = iframeElem[0].contentDocument || iframeElem[0].contentWindow.document;
        // iframeで読み込まれているページ内のIDname要素を取得
        ...
    });
    
[/code]


CC BY-SA 4.0
2022-07-26T04:34:57.587
90196
2022-07-26T14:16:26.143
2022-07-26T14:16:26.143
3475
3475
90182
answer