[SOLVED] How to get html element in #document of iframe tag

Issue

i’m new with Stack Overflow. I don’t have enough 10 reputation to embed image. Sorry for this inconvenience but I have some question about iframe tag:

I tried some way to get html element in #document of iframe tag, but somehow it still not work. Can you explain why for me and how can I get element have id = "check". I’m try to learn

There is test.blade.php:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <iframe src="/login" width="100%" height="100%" id="iframe"></iframe>

    <script>
        const iframe = $("#iframe");
        console.log(iframe);
        console.log(iframe.contents());
        console.log(iframe.contents().find("#check").html());
    </script>
</body>

</html>

There is login.blade.php

<x-common :title="'Login'">
    <x-slot name='main'>
        <div class="w-full lg:w-4/12 px-4">
            <div class="pt-20"></div>
            <div
                class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-200 border-0">
                <div class="rounded-t mb-0 px-6 py-6">
                    <div class="text-center mb-3">
                        <h6 class="text-gray-500 text-sm font-bold">
                            Sign in with
                        </h6>
                    </div>
                    <div class="btn-wrapper text-center">
                        <button
                            class="bg-white active:bg-gray-50 text-gray-700 px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
                            type="button">
                            <img alt="..." class="w-5 mr-1"
                                src="{{ asset('assets/img/github.svg') }}" />Github</button><button
                            class="bg-white active:bg-gray-50 text-gray-700 px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
                            type="button">
                            <img alt="..." class="w-5 mr-1" src="{{ asset('assets/img/google.svg') }}" />Google
                        </button>
                    </div>
                    <hr class="mt-6 border-b-1 border-gray-300" />
                </div>
                <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
                    <div class="text-gray-400 text-center mb-3 font-bold">
                        <small>Or sign in with credentials</small>
                    </div>
                    <x-alert></x-alert>
                    <form action="login" method="post">
                        <div class="relative w-full mb-3">
                            <label class="block uppercase text-gray-600 text-xs font-bold mb-2"
                                for="grid-password">Email</label><input type="email"
                                class="border-0 px-3 py-3 placeholder-gray-300 text-gray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                                placeholder="Email" name="email" value="{{ old('email') }}" />
                        </div>
                        <div class="relative w-full mb-3">
                            <label class="block uppercase text-gray-600 text-xs font-bold mb-2"
                                for="grid-password">Password</label><input type="password" autocomplete="on"
                                class="border-0 px-3 py-3 placeholder-gray-300 text-gray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                                placeholder="Password" name="password" value="{{ old('password') }}" />
                        </div>
                        <div id="check">
                            <label class="inline-flex items-center cursor-pointer"><input id="customCheckLogin"
                                    type="checkbox"
                                    class="form-checkbox border-0 rounded text-gray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
                                    name="remember" /><span class="ml-2 text-sm font-semibold text-gray-600">Remember
                                    me</span></label>
                        </div>
                        <div class="text-center mt-6">
                            <button
                                class="bg-gray-800 text-white active:bg-gray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
                                type="submit">
                                Sign In
                            </button>
                        </div>
                        @csrf
                    </form>
                    <div class="flex flex-wrap">
                        <div class="w-1/2">
                            <a href="password/forgot" class="text-gray-500 text-sm font-bold"><small>Forgot
                                    password?</small></a>
                        </div>
                        <div class="w-1/2 text-right">
                            <a href="register" class="text-gray-500 text-sm font-bold"><small>Create new
                                    account</small></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </x-slot>
</x-common>

Console

Elements

Solution

I think the iframe document is not ready when you try to access the nodes. You should wait for the iframe load event after that you can access the child nodes.

$('#iframe').on("load", function() {
    // do the stuff here
});

Answered By – omi

Answer Checked By – Marilyn (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.