如何在iframe标签的#document中获取HTML元素
我是新来的堆栈溢出。我没有足够的10个声誉来嵌入图像。不便之处，敬请原谅，但我对iframe标签有一些疑问：
我尝试了某种方法来获取#document iframe标签中的html元素，但是以某种方式仍然不起作用。您能解释为什么我以及如何获得元素具有ID =“ check”。我尝试学习
有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>有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>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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为当您尝试访问节点时，iFrame文档还没有准备好。您应该等待iframe加载事件之后，您可以访问子节点。
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.
您应该尝试使用JavaScript捕获IFRAME的事件：
或者可以使用jQuery：
You should try to catch the event 'load' of the iframe using javascript:
Or you can use jquery instead: