如何在iframe标签的#document中获取html元素

Question

i'm new with Stack Overflow.我是 Stack Overflow 的新手。 I don't have enough 10 reputation to embed image.我没有足够的 10 声望来嵌入图像。 Sorry for this inconvenience but I have some question about iframe tag:很抱歉给您带来不便，但我对 iframe 标签有一些疑问：

I tried some way to get html element in #document of iframe tag, but somehow it still not work.我尝试了一些方法来获取 iframe 标签的#document 中的 html 元素，但不知何故它仍然无法正常工作。 Can you explain why for me and how can I get element have id = "check".你能解释一下为什么对我来说，我怎样才能让元素有 id =“检查”。 I'm try to learn我正在努力学习

There is test.blade.php:有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有 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元素

Answer 1

I think the iframe document is not ready when you try to access the nodes.我认为当您尝试访问节点时 iframe 文档还没有准备好。 You should wait for the iframe load event after that you can access the child nodes.您应该等待 iframe 加载事件之后才能访问子节点。

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

Answer 2

You should try to catch the event 'load' of the iframe using javascript:您应该尝试使用 javascript 捕获 iframe 的事件“加载”：

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:或者您可以使用 jquery 代替：

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

如何在iframe标签的#document中获取html元素

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-06-24 09:16:21

解决方案2
0 2022-06-24 09:25:24

如何在iframe标签的#document中获取html元素

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-06-24 09:16:21

解决方案2 0 2022-06-24 09:25:24

解决方案1
1 已采纳 2022-06-24 09:16:21

解决方案2
0 2022-06-24 09:25:24