Question

我在另一个页面上的iframe中有一个HTML页面。主页面有一个文本区域供用户更改iframe内页面上的标题文本。我想要做的是让用户能够在文本区域中输入他想要的标题，并将该输入显示在iframe html代码中。我不知道如何使用从一个页面获取用户输入，并将其输入到另一个页面。任何有关如何做到这一点或正确方向的帮助都会有所帮助

Answer 1

最简单的方法是从第1页传递查询字符串参数并重新加载其中使用的iframe的源。在另一页上，获取查询字符串参数并使用它来更改html元素的属性。

以下是示例代码：

第1页：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
</head>
<body>
    <h2>This is page 1</h2>
    <input type="text" onchange="ChangeText(this);" />
    <iframe id="ifrm1" src="HtmlPage2.html"></iframe>
     <script type="text/javascript">
         var originalUrl;
         $().ready(function () {
             originalUrl = $("#ifrm1").attr("src");
         });
         function ChangeText(obj) {             
             $("#ifrm1").attr("src", originalUrl + "?text=" + obj.value);
         }         

   </script>
</body>    
</html>

第2页：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
</head>
<body>
    <h2>This is page 2</h2>
    <input type="text" id="txt1" />
     <script type="text/javascript">
         $().ready(function ()
         {
             var getText = getParameterByName("text");
             $("#txt1").val(getText);
         });

         function getParameterByName(name) {
             name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
             var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                 results = regex.exec(location.search);
             return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
         }

   </script>
</body>    
</html>

希望它有所帮助。

使用用户输入修改Iframe中的html

1 个答案: