开发者社区> 问答> 正文

宜搭iframe组件能不能实现参数传递

已解决

例如有A、B两个表单,B表单对A表单有依赖,也就是说B表单中有一个字段是A表单的流水号,并且是必填项,现在我有一个自定义页面,其中有一个展示A表单数据的表格,此时我选中这个表格中的一行数据,然后点击“添加B表单数据”的按钮,这个按钮会打开一个对话框并通过iframe展示一张待填写的B表单,那么此时我能不能将我选中的那一行的A表单数据中的流水号传给iframe,让iframe直接把这个A表单流水号填到这个待填写的B表单中

展开
收起
游客kwinism27dh5i 2023-07-07 16:27:14 148 0
10 条回答
写回答
取消 提交回答
  • 值得去的地方都没有捷径
    采纳回答

    宜搭iframe组件可以实现参数传递,您可以通过将参数作为URL的查询参数传递给iframe来实现。在您的情况下,可以将选中的A表单数据中的流水号作为参数传递给iframe,让iframe直接将该流水号填写到待填写的B表单中。

    以下是一般的步骤来实现参数传递给iframe:

    1. 构建URL参数:将选中的A表单数据中的流水号作为参数,构建一个URL参数字符串。

    2. 构建iframe的src属性:在您的自定义页面中,通过拼接URL参数字符串和B表单的URL,构建iframe的src属性。例如,假设B表单的URL为https://example.com/b-form,那么构建的iframe的src属性可能如下所示:

      <iframe src="https://example.com/b-form?serialNumber=xxxxxx"></iframe>
      

      其中xxxxxx是您选中的A表单数据中的流水号。

    3. 在B表单中获取参数:在B表单的页面中,通过解析URL参数,获取传递过来的流水号。具体的获取方式取决于您使用的前端框架或技术。

    请注意,具体的实现方式和代码可能因您使用的框架、工具和环境而有所不同。以上是一种通用的思路和基本的操作步骤。建议您参考宜搭官方文档和示例,以获取更详细和准确的指导。

    如果您有特定的问题或需要进一步的帮助,请提供更多的信息,我将尽力回答您的问题。

    2023-07-09 18:23:47
    赞同 1 展开评论 打赏
  • 天下风云出我辈,一入江湖岁月催,皇图霸业谈笑中,不胜人生一场醉。

    是的,你可以通过iframe传递参数来实现这个功能。具体来说,你可以在A表单中添加一个hidden字段,用于存储A表单的流水号。然后,在添加B表单数据的按钮被点击时,你可以将A表单的流水号作为参数传递给iframe,以便iframe能够将其填写到B表单中。
    以下是一个示例代码,展示如何在HTML表单中添加一个hidden字段和一个按钮,并通过iframe传递参数:
    HTML代码:

    <form id="a-form">
      <label for="a-input">A表单流水号:</label>
      <input type="hidden" id="a-input" name="a-input">
      <button type="button" id="b-form-button">添加B表单数据</button>
    </form>
    
    <div id="b-form-iframe"></div>
    

    JavaScript代码:

    const aForm = document.getElementById('a-form');
    const bFormButton = document.getElementById('b-form-button');
    const bFormIframe = document.getElementById('b-form-iframe');
    
    bFormButton.addEventListener('click', function() {
      const aInput = document.getElementById('a-input');
      const bForm = document.createElement('iframe');
      bForm.src = 'https://example.com/b-form?a-input=' + aInput.value;
      bForm.style.display = 'none';
      document.body.appendChild(bForm);
    });
    

    当添加B表单数据的按钮被点击时,我们会创建一个iframe,并将其src属性设置为一个URL,该URL将包含A表单的流水号作为参数。然后,我们将iframe添加到文档中,并将其style属性设置为'none',以防止其在页面上显示。最后,我们将iframe的src属性设置为包含参数的URL,以便在页面加载时将参数传递给iframe。

    2023-07-10 10:47:58
    赞同 展开评论 打赏
  • 热爱开发

    可以通过以下方法将A表单的流水号传给iframe:

    在A表单的数据发起请求时,将流水号作为参数传递给服务器。
    在服务器端将流水号保存到一个全局变量中。
    在B表单的数据发起请求时,将流水号作为参数传递给服务器。
    在服务器端将流水号与B表单的数据进行关联,并将关联结果返回给客户端。
    在客户端将关联结果保存到iframe中,并将iframe的内容更新为A表单的数据和B表单的关联结果。

    2023-07-08 08:53:35
    赞同 展开评论 打赏
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

    宜搭的iframe组件可以实现参数传递。通过设置src属性来指定要加载的外部页面,并在URL中添加参数来传递数据。

    例如,您可以使用以下方式将参数传递给iframe组件:

    <iframe src="https://example.com/page?param1=value1&param2=value2"></iframe>
    

    在上述示例中,我们将参数param1和param2传递给了外部页面。外部页面可以通过解析URL中的查询参数来获取这些值,并进行相应的处理。

    请注意,具体如何在外部页面中获取参数值取决于该页面的编程语言和框架。通常情况下,您可以使用JavaScript来获取URL中的参数值。

    总结而言,通过在src属性中添加参数,您可以实现在宜搭的iframe组件中传递参数给外部页面。

    2023-07-07 21:15:32
    赞同 展开评论 打赏
  • 北京阿里云ACE会长

    在选中 A 表单数据后,记录下流水号,例如保存在变量 a 中。

    在打开 iframe 对话框时,将 a 作为参数添加到 iframe 的 URL 中,例如:。

    在 B 表单页面中,可以通过 JavaScript 获取 URL 中的参数并将其填充到表单中对应的字段中,例如:

    
    
    
    // 获取 URL 中的参数
    var a = getParameterByName('a');
    
    // 将参数填充到表单中对应的字段中
    document.getElementById('流水号字段的ID').value = a;
    
    // 获取 URL 中的参数的函数
    function getParameterByName(name) {
      var url = window.location.href;
      name = name.replace(/[\[\]]/g, '\\$&');
      var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
      var results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }
    
    2023-07-07 18:41:45
    赞同 展开评论 打赏
  • 是的,你可以通过以下步骤将选中的A表单数据中的流水号传给iframe,以便在待填写的B表单中自动填充该值:

    在你的自定义页面中,在“添加B表单数据”的按钮上添加一个事件监听器,当按钮被点击时,执行以下操作。
    在事件监听器中,获取你选中的A表单数据的流水号。你可以使用相应的JavaScript代码来获取该值,具体取决于你的页面结构和数据获取方式。
    获取到流水号后,通过JavaScript将该值传递给iframe。你可以使用postMessage函数来向iframe发送消息,将流水号作为消息的内容发送给iframe。
    在你的iframe中,设置一个消息监听器,以接收来自父页面的消息。当iframe加载完成后,使用addEventListener函数来监听postMessage事件。
    在消息监听器中,当收到来自父页面的消息时,解析消息内容并获取到流水号。然后,你可以使用JavaScript将流水号填充到待填写的B表单中的相应字段中。
    这样,当你在父页面中选择一行A表单数据并点击“添加B表单数据”按钮时,流水号将被自动填充到打开的B表单中。请确保你的iframe和父页面之间的通信设置正确,并且没有跨域问题。

    2023-07-07 18:27:56
    赞同 展开评论 打赏
  • 十年摸盘键,代码未曾试。 今日码示君,谁有上云事。

    iframe(内嵌框架)是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签,它可以在一个页面中显示来自其他页面的内容。在网页中,使用

    2023-07-07 17:10:19
    赞同 1 展开评论 打赏
  • 宜搭(EasyEDA)的iframe组件主要用于在页面中嵌入其他网页或应用程序。通常情况下,iframe组件本身并不直接支持参数传递功能,因为它只是简单地呈现被嵌入网页的内容。

    然而,您可以通过一些额外的技术手段来实现在iframe组件中进行参数传递。以下是一种常见的方法:

    1. 在嵌入的网页中,通过URL的查询字符串(Query String)来传递参数。例如,您可以在iframe的src属性中添加参数,如<iframe src="https://example.com?param1=value1&param2=value2"></iframe>

    2. 在被嵌入的网页中,使用JavaScript来获取URL中的查询字符串,并使用该参数进行相应的操作。您可以使用JavaScript中的location.search来获取查询字符串,并根据需要解析和处理参数。

    3. 如果被嵌入的网页和宜搭平台之间存在跨域问题,您可能需要采取一些额外的措施来解决跨域访问的限制。这可能涉及到服务器端的配置或使用相关的跨域解决方案,具体方式会依赖于您的环境和需求。

    请注意,具体的实现方法可能因您使用的iframe组件、被嵌入的网页和浏览器等因素而有所不同。建议参考相关的宜搭文档、开发者文档或与宜搭支持团队进行联系,以获取准确的操作指导和支持。

    总之,通过在URL中传递查询字符串参数,并在被嵌入网页中使用JavaScript处理这些参数,可以实现在宜搭iframe组件中进行参数传递。

    2023-07-07 17:07:56
    赞同 展开评论 打赏
  • 是个只会写bug的程序媛啊!!!

    可以使用 iframe 组件来传递参数。有以下几种方法: 1. 在 iframe 中使用 JavaScript 获取主页面的 URL,并从 URL 中解析出参数。```

     2.  使用 URLSearchParams 对象来解析参数。
    
    
     3.  使用 postMessage() 方法向 iframe 发送消息。
    
    
    在 iframe 中,可以通过监听 message 事件来接收来自主页面的消息,并从中获取参数。
    

    window.addEventListener("message", function(event) { var message = event.data; var param1 = message.param1; var param2 = message.param2; console.log(param1, param2); });

    
    
    
    2023-07-07 16:44:40
    赞同 展开评论 打赏
  • 公众号:网络技术联盟站,InfoQ签约作者,阿里云社区签约作者,华为云 云享专家,BOSS直聘 创作王者,腾讯课堂创作领航员,博客+论坛:https://www.wljslmz.cn,工程师导航:https://www.wljslmz.com

    可以通过iframe的url传递参数来实现参数传递。您可以在iframe的url中添加参数来传递A表单流水号,然后在B表单中通过JavaScript获取这个流水号并填写到相应的字段中。例如,您可以将iframe的url设置为/path/to/b-form?serial_number=12345,然后在B表单的JavaScript代码中使用window.location.search来获取url中的参数,并将其填写到相应的字段中。

    2023-07-07 16:44:41
    赞同 展开评论 打赏
滑动查看更多
问答分类:
问答地址:
关联地址:
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载