山河故人163 2023-07-01 10:44 采纳率: 0%
浏览 12

javascript iframe标签嵌套的问题

前端 iframe嵌套的页面，可以正常显示，但是页面里面的提交按钮的接口，域名会变成localhost，这种情况应该怎么处理呢？需要将跳接口域名变为嵌套页面的正常的域名

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-07-01 12:30
    关注
    • 你可以看下这个问题的回答https://ask.csdn.net/questions/1091494
    • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：js 实现iframe + form异步文件提交方案分析
    • 除此之外, 这篇博客: javascript —— 父页面监听iframe子页面的自定义事件中的 怎么触发自定义事件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    • 触发自定义事件可以通过指定对象来触发，这里通过window来触发，代码如下：

      window.dispatchEvent(bEvent);
    • 以下回答由chatgpt基于相关博客总结生成:

      根据问题描述，你在前端中使用了嵌套的iframe标签，并且遇到了一个问题：嵌套页面中的提交按钮导致的接口跳转时，域名会变成localhost。你想知道如何处理这种情况，需要将接口跳转的域名修改为嵌套页面正常的域名。

      根据提供的参考资料，我提供以下解决方案：

      首先，从参考资料可以看出，通过改变iframe的src属性来实现不同页面的切换。但是这种方式只能刷新整个页面，而不能实现局部刷新。

      第一种方法可以通过以下代码实现：

      <!DOCTYPE html>
<html>
<head>
<script>
function changeSrc(src) {
    var iframe = document.getElementById("iframe");
    iframe.src = src;
}
</script>
</head>
<body>
<a href="#" onclick="changeSrc('a1.html')">1</a>
<a href="#" onclick="changeSrc('a2.html')">2</a>
<iframe id="iframe"></iframe> 
</body>
</html>

      第二种方法通过修改链接的target属性来实现局部刷新：

      <!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="a1.html" target="iframe">1</a>
<a href="a2.html" target="iframe">2</a>
<iframe src="" id="iframe"></iframe> 
</body>
</html>

      以上两种方法都是可以实现局部刷新的，但是这并不能解决你的问题。

      根据提供的参考资料，第二段代码展示了父页面和iframe页面的完整代码。在父页面中，通过使用contentWindow属性获取到了iframe页面的window对象，然后通过在子页面中触发自定义事件来与父页面进行通信。

      根据这个思路，我们可以在子页面中的接口跳转处，通过触发自定义事件的方式，将跳转的url传递给父页面，让父页面来进行跳转。

      具体的实现步骤如下：

      1. 在子页面中，将接口跳转的url传递给父页面，可以通过以下代码实现：
      <!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">
    <title>Document</title>
</head>
<body>
    <span id="bspan" style="color:red;">我是嵌入的b页面</span>
    <button onclick="redirectTo('http://example.com/api')">点击跳转</button>
</body>
<script type="text/javascript">
    function redirectTo(url) {
        var event = new CustomEvent("redirectTo", {
            detail: {
                url: url
            }
        });
        window.parent.postMessage(event, '*');
    }
</script>
</html>
      1. 在父页面中，监听子页面触发的自定义事件，并根据传递的url进行跳转，可以通过以下代码实现：
      <!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">
    <title>Document</title>
</head>
<body>
    <h2>嵌入b页面：</h2>
    <iframe id="b_iframe" src="b.html"></iframe>
</body>
<script type="text/javascript">
    var bWin = document.getElementById("b_iframe").contentWindow;
    window.addEventListener('message', function(event) {
        if (event.data.detail && event.data.detail.url) {
            window.location.href = event.data.detail.url;
        }
    }, false);
</script>
</html>

      通过以上的代码，当子页面中的按钮被点击时，会触发自定义事件，并将跳转的url传递给父页面，然后父页面进行页面跳转。

      请注意，由于涉及到跨域通信，需要确保父页面和子页面的域名是同源的，并在子页面中的跳转按钮上添加onclick事件来触发redirectTo函数。

      希望以上解决方案能够帮助到你，如果有任何疑问，请随时提问。

    评论

报告相同问题？

  • javascript iframe编程相关代码
    2020-10-29 11:17
    以上知识点总结了使用JavaScript进行iframe编程时，对不同层次的iframe框架进行引用和操作的多种方法，包括父窗口与子窗口、兄弟窗口间的引用规则，以及顶层窗口的识别。这些知识点对于熟悉iframe操作的开发者来说，...
  • 理解javascript异步编程
    2020-10-22 22:05
    JavaScript作为一种单线程的脚本语言，其运行环境是事件驱动的，这意味着它的执行机制完全依赖于事件循环。从异步机制讲起，我们首先要明确，虽然JavaScript是单线程的，但它通过事件循环和回调函数来支持非阻塞操作...
  • JavaScript框架编程第1/2页
    2020-10-30 13:32
    ### JavaScript框架编程知识点详解 #### 一、框架与Window对象的关系 在JavaScript中，框架（Frames）的概念至关重要，尤其在处理多页面布局时。框架实际上是一个网页内的窗口，它可以加载并显示另一个HTML文档。...
  • 【JavaScript编程】iframe
    2019-07-30 10:47
    猿始森林的博客 iframe标签 用于定义内联框架，内联框架是在一个页面中嵌入另一个页面。如： <iframe src="https://blog.csdn.net/guang_s"></iframe> 有很多网页看上去是一个网页，但实际上它其中可能镶嵌有其它网页...
  • 防止被IFRAME嵌套并自动跳到首页代码.rar
    2019-07-04 21:22
    JavaScript是一种广泛用于网页交互和动态效果的编程语言，可以检测当前页面是否在IFRAME中运行，并根据条件执行相应的操作，如跳转。 在实际应用中，这样的代码可能包含以下部分： 1. `window.top` 和 `window.self...
  • 基于js的iframe 可关闭tab标签组件使用方法
    2018-01-12 11:55
    本教程将详细讲解如何使用JavaScript实现一个可关闭的iframe内嵌tab标签组件。这个组件能够帮助用户在同一个页面中方便地切换和管理多个内容区域，而无需刷新整个页面。 首先，`iframe`是HTML5中的一个元素，它允许...
  • iframe 跨源通信的详细编程步骤和思路梳理
    2025-02-21 15:28
    亚洲大胆的椰子的博客 iframe 跨源通信的详细编程步骤和思路梳理
  • JavaScript iframe 多窗口通信实战
    2023-02-22 11:20
    森林迷Le鹿的博客 iframe通信
  • iframe加载第三方网页报错问题记录(后续)
    2024-12-17 01:32
    鞋匠学编程的博客 （3）iframe加载失败，是因为跨域问题还是cookie无法获取的问题？是不是和域名有关，登录状态认证是如何处理的？（2）返回的url，为什么在浏览器的地址栏可以打开，内嵌入iframe就显示未登录？（4）根据页面的请求来...
  • 解决双iframe互相刷新进入死循环的问题
    2019-04-10 01:51
    这个问题通常发生在两个或多个iframe之间尝试通过JavaScript互相重载对方，导致无限循环，严重影响用户体验并可能导致浏览器崩溃。 首先，让我们深入理解问题的原因。当两个iframe A和B相互引用并试图重载对方时，...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 7月1日