Question

我有一个html文件，其中包含iframe，如下面的代码行。请注意，此iframe由一个小的mce jquery显示，并在浏览器中呈现为下面

 <html>
 <body>
   <textarea id="texteditor"></textarea>
   <div class="mceeditor">
     <iframe>
       <html>
         <body>
           <script type="text/javascript">

     function mySubmit() {
         var URL = "http://localhost:61222/14CommunityImages/hands.png";

         window.document.getElementById("texteditor").value = URL;
               }
          </script>
          </body>
       </html>  
     </iframe>
    </div>
   </body>
 </html>

现在我的目标是将var url附加到父html标记中的文本区域中。请帮帮我!!!

Answer 1

iframe中的文档可以通过parent访问其父窗口，并通过parent.document访问其父窗口的文档。所以：

parent.document.getElementById("texteditor").value = URL;

注意：要访问彼此的其他文档，主文档和iframe必须位于same origin。如果他们是不同的来源，他们仍然可以进行沟通，但前提是他们两者明确地通过web messaging进行沟通。

旁注：如问题中所示，您的iframe将无效。 iframe中的内联内容用于在浏览器不支持iframe时显示。您使用由src属性标识的单独的资源（例如，页面）（或者您使用srcdoc属性;我不知道它是否支持得多）， iframe的内容。

E.g：

主页：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
    <iframe src="theframe.html"></iframe>
</div>
</body>
</html>

theframe.html：

<!doctype html>
<html>
    <body>
        <input type="button" value="Click to set" onclick="mySubmit()">
        <script type="text/javascript">
            function mySubmit() {
            var URL = "http://localhost:61222/14CommunityImages/hands.png";

            parent.document.getElementById("texteditor").value = URL;
            }
        </script>
    </body>
</html>

如何在html标签内的iframe中访问html元素

1 个答案: