css - iframe url 到 css div url

标签 css html iframe

我有一个将在 iframe 中显示的 url

<iframe width="250" height="200" frameBorder="0" data-href="http://localhost:8080/webapps/testauth.jsp?appID=a71c5859-03eb-4c16-ac08-1cac24ed2a1d"></iframe>

如果我将上面的代码粘贴到任何网站,它会在网站中显示小部件,例如 Facebook 插件

但现在我的工作是将它从 iframe 更改为 css div。我对 UI 部分了解不多,遇到问题可以帮助我。

改变应该是这样的

<div class="something"data-href="http://localhost:8080/webapps/auth.jsp?appID=a71c5859-03eb-4c16-ac08-1cac24ed2a1d" data-width="292" ></div>

最佳答案

您需要为此执行跨域 ajax 请求。按照以下步骤完成

  • 在 js 中构建 ajax 请求并将其放在您要发布小部件的域上

  • 将脚本添加到您希望显示小部件的页面。确保将文件的来源设置为所有者域,并且不要在本地复制 js 文件。这是必要的,否则浏览器会发出安全警告并且不允许它。

  • 调用包含 js 的函数来执行请求并从原始域中获取内容。

这将使添加小部件的过程变得更加困难,但 div 将不允许您从任何域加载内容(只有 iframe 和框架可以这样做)。

关于css - iframe url 到 css div url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13117116/

相关文章:

css - 隐藏 HTML 页面上的滚动条

javascript - ReactJS - 如何为 SEO 渲染 iframe 内部内容服务器端?

html - 在IOS中, Bootstrap 模式中的iframe无法滚动

html - 需要帮助自定义 Css 皮肤 Telerik 控件中的 CSS 伪元素

html - 在容器中居中可变数量的 div

css - 图像在缩放时未与 div 对齐

javascript - 如果输入了数据,请清空文本框

javascript - slidetoggle jquery 不会显示

html - 使用 Bootstrap 4 将图像居中放置在另一个图像之上

javascript - 如何获取iframe内内容的滚动位置