langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 20:15:31 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

The embedded website displays normally on the computer, but not on the mobile browser #19275

New Issue
Closed
opened 2026-02-21 19:57:50 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 19:57:50 -05:00
Owner
Copy Link
Copy Source

Originally created by @0824F on GitHub (Oct 14, 2025).

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report, otherwise it will be closed.
  • 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：）
  • Please do not modify this template :) and fill in all the required fields.

Dify version

1.3.0

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

`
"use client";
import { useEffect } from "react";

const DifyChatbot = () => {
useEffect(() => {
console.log("[DifyChatbot] 🚀 初始化组件...");

try {
  const params = new URLSearchParams(window.location.search);
  const token = params.get("token") ?? "pJzEovuPKYUBfvYa";
  const userId = params.get("userId") ?? "guest";

  console.log("[DifyChatbot] ✅ 获取参数成功：", { token, userId });

  const configScript = document.createElement("script");
  configScript.innerHTML = `
    window.difyChatbotConfig = {
      token: '${token}',
      baseUrl: 'xxxxx.url', // Replace with fake url
      systemVariables: {
        user_id: '${userId}'
      }
    };
  `;
  document.body.appendChild(configScript);
  console.log("[DifyChatbot] 🧩 已注入 window.difyChatbotConfig");

  const script = document.createElement("script");
  script.src = "xxxxx.url"; // Replace with fake url
  script.id = token;
  script.defer = true;

  script.onload = () => {
    console.log("[DifyChatbot] ✅ embed.min.js 加载完成");
  };
  script.onerror = (e) => {
    console.error("[DifyChatbot] ❌ embed.min.js 加载失败", e);
  };

  document.body.appendChild(script);
  console.log("[DifyChatbot] ⏳ 正在加载 embed.min.js...");

  const style = document.createElement("style");
  style.innerHTML = `
    #dify-chatbot-bubble-button {
      background-color: #1C64F2 !important;
    }
    #dify-chatbot-bubble-window {
      width: 24rem !important;
      height: 40rem !important;
    }
  `;
  document.head.appendChild(style);
  console.log("[DifyChatbot] 🎨 样式注入完成");

  return () => {
    console.log("[DifyChatbot] 🧹 清理旧实例...");
    if (document.body.contains(script)) document.body.removeChild(script);
    if (document.body.contains(configScript))
      document.body.removeChild(configScript);
    if (document.head.contains(style)) document.head.removeChild(style);
    console.log("[DifyChatbot] ✅ 清理完成");
  };
} catch (error) {
  console.error("[DifyChatbot] ⚠️ 执行出错：", error);
}

}, []);

return null;
};

export default DifyChatbot;

`

✔️ Expected Behavior

I hope that mobile browsers can also display the dify iframe element normally

❌ Actual Behavior

The above is the code of the project. I used the react framework to write it. After deployment, I found that dify can be displayed on the computer browser, but not on the mobile browser. After checking the console elements on both ends, I found that the Iframe element is missing on the mobile browser.

PC

Image

Mobile

Image
Originally created by @0824F on GitHub (Oct 14, 2025). ### Self Checks - [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542). - [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report, otherwise it will be closed. - [x] 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：） - [x] Please do not modify this template :) and fill in all the required fields. ### Dify version 1.3.0 ### Cloud or Self Hosted Self Hosted (Docker) ### Steps to reproduce ` "use client"; import { useEffect } from "react"; const DifyChatbot = () => { useEffect(() => { console.log("[DifyChatbot] 🚀 初始化组件..."); try { const params = new URLSearchParams(window.location.search); const token = params.get("token") ?? "pJzEovuPKYUBfvYa"; const userId = params.get("userId") ?? "guest"; console.log("[DifyChatbot] ✅ 获取参数成功：", { token, userId }); const configScript = document.createElement("script"); configScript.innerHTML = ` window.difyChatbotConfig = { token: '${token}', baseUrl: 'xxxxx.url', // Replace with fake url systemVariables: { user_id: '${userId}' } }; `; document.body.appendChild(configScript); console.log("[DifyChatbot] 🧩 已注入 window.difyChatbotConfig"); const script = document.createElement("script"); script.src = "xxxxx.url"; // Replace with fake url script.id = token; script.defer = true; script.onload = () => { console.log("[DifyChatbot] ✅ embed.min.js 加载完成"); }; script.onerror = (e) => { console.error("[DifyChatbot] ❌ embed.min.js 加载失败", e); }; document.body.appendChild(script); console.log("[DifyChatbot] ⏳ 正在加载 embed.min.js..."); const style = document.createElement("style"); style.innerHTML = ` #dify-chatbot-bubble-button { background-color: #1C64F2 !important; } #dify-chatbot-bubble-window { width: 24rem !important; height: 40rem !important; } `; document.head.appendChild(style); console.log("[DifyChatbot] 🎨 样式注入完成"); return () => { console.log("[DifyChatbot] 🧹 清理旧实例..."); if (document.body.contains(script)) document.body.removeChild(script); if (document.body.contains(configScript)) document.body.removeChild(configScript); if (document.head.contains(style)) document.head.removeChild(style); console.log("[DifyChatbot] ✅ 清理完成"); }; } catch (error) { console.error("[DifyChatbot] ⚠️ 执行出错：", error); } }, []); return null; }; export default DifyChatbot; ` ### ✔️ Expected Behavior I hope that mobile browsers can also display the dify iframe element normally ### ❌ Actual Behavior The above is the code of the project. I used the react framework to write it. After deployment, I found that dify can be displayed on the computer browser, but not on the mobile browser. After checking the console elements on both ends, I found that the Iframe element is missing on the mobile browser. PC <img width="1920" height="960" alt="Image" src="https://github.com/user-attachments/assets/008641a5-4a3e-497f-9ea3-e0839227a222" /> Mobile <img width="1850" height="821" alt="Image" src="https://github.com/user-attachments/assets/16287db7-3e4b-413a-a825-9809604b0bfe" />
yindo added the 🐞 bug label 2026-02-21 19:57:50 -05:00
yindo closed this issue 2026-02-21 19:57:50 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#19275
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?