How to get html element in #document of iframe tag-CodePudding

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 >
            <div ></div>
            <div
                >
                <div >
                    <div >
                        <h6 >
                            Sign in with
                        </h6>
                    </div>
                    <div >
                        <button
                            
                            type="button">
                            <img alt="..." 
                                src="{{ asset('assets/img/github.svg') }}" />Github</button><button
                            
                            type="button">
                            <img alt="..."  src="{{ asset('assets/img/google.svg') }}" />Google
                        </button>
                    </div>
                    <hr  />
                </div>
                <div >
                    <div >
                        <small>Or sign in with credentials</small>
                    </div>
                    <x-alert></x-alert>
                    <form action="login" method="post">
                        <div >
                            <label 
                                for="grid-password">Email</label><input type="email"
                                
                                placeholder="Email" name="email" value="{{ old('email') }}" />
                        </div>
                        <div >
                            <label 
                                for="grid-password">Password</label><input type="password" autocomplete="on"
                                
                                placeholder="Password" name="password" value="{{ old('password') }}" />
                        </div>
                        <div id="check">
                            <label ><input id="customCheckLogin"
                                    type="checkbox"
                                    
                                    name="remember" /><span >Remember
                                    me</span></label>
                        </div>
                        <div >
                            <button
                                
                                type="submit">
                                Sign In
                            </button>
                        </div>
                        @csrf
                    </form>
                    <div >
                        <div >
                            <a href="password/forgot" ><small>Forgot
                                    password?</small></a>
                        </div>
                        <div >
                            <a href="register" ><small>Create new
                                    account</small></a>
                        </div>
                    </div>
                </div>

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

Console

Elements

CodePudding user response：

You should try to catch the event 'load' of the iframe using javascript:

document.querySelector("iframe").addEventListener( "load", function() {
    console.log("This will appear on the console when the iframe is loaded");
});

Or you can use jquery instead:

$('iframe').on("load", function() {
    // content for the iframe when it is loaded
}

CodePudding user response：

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
});