如何在iframe标签的#document中获取html元素
[英]How to get html element in #document of iframe tag
问题描述
我是 Stack Overflow 的新手。 我没有足够的 10 声望来嵌入图像。 很抱歉给您带来不便，但我对 iframe 标签有一些疑问：
我尝试了一些方法来获取 iframe 标签的#document 中的 html 元素，但不知何故它仍然无法正常工作。 你能解释一下为什么对我来说，我怎样才能让元素有 id =“检查”。 我正在努力学习
有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>
2 个解决方案
解决方案1
1 已采纳 2022-06-24 09:16:21
我认为当您尝试访问节点时 iframe 文档还没有准备好。 您应该等待 iframe 加载事件之后才能访问子节点。
$('#iframe').on("load", function() {
// do the stuff here
});
解决方案2
0 2022-06-24 09:25:24
您应该尝试使用 javascript 捕获 iframe 的事件“加载”：
document.querySelector("iframe").addEventListener( "load", function() {
console.log("This will appear on the console when the iframe is loaded");
});
或者您可以使用 jquery 代替：
$('iframe').on("load", function() {
// content for the iframe when it is loaded
}
如何使用html中的javascript获取iframe作为字符串并将其显示在div标签中？
[英]How to get the iframe as string and show it in the div tag using javascript in html?
如何跨内部选择元素 <HTML> 包含在带有jQuery选择器的iframe中的代码？
[英]How to select an element across inner <HTML> tag contained in a Iframe with jQuery selector?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.