jquery - 如何从我发现的脚本中制作一个 iframe 到 ajax 注入中?

Posted

技术标签:

【中文标题】jquery - 如何从我发现的脚本中制作一个 iframe 到 ajax 注入中?【英文标题】:jquery - how to make an iframe from a script i found into an ajax injection? 【发布时间】:2011-01-18 15:40:51 【问题描述】:

我想知道如何更改这个附加的 iframe:

$("#GB_window").append("<iframe id='GB_frame' src='" + url + "'></iframe>");

进入一个div。有没有办法改变这一点,以便我不附加 iframe,而是使用 ajax?我需要能够使用

src='" + url + "'

其中的一部分。我还是个新手。

如果您想查看我正在编辑的脚本,这是不久前 John Resig 的 GreyBox Redux 灯箱脚本。到目前为止,我已经删除了相当数量的 jquery,因为我只需要它来显示图像,而不是网站。它也只有几个 kb。

谢谢。

这是我剥离后留下的 jquery:

    var GB_DONE = false;

function GB_show(caption, url, height, width)
    GB_HEIGHT = height || 400;
    GB_WIDTH = width || 400;
    if (!GB_DONE) 
        $(document.body).append("<div id='GB_overlay'></div><div id='GB_window'>");
        $("#GB_overlay").click(GB_hide);
        $(window).resize(GB_position);
        GB_DONE = true;
    

    $("#GB_frame").remove();
    $("#GB_window").append("<iframe id='GB_frame' src='" + url + "'></iframe>");

    $("#GB_overlay").fadeIn(350, function()
        $("#GB_window").fadeIn(350);
    );
    GB_position();


function GB_hide()
$("#GB_window,#GB_overlay").fadeOut(350, function()
    $("#GB_window,#GB_overlay").hide()
);


function GB_position()
var de = document.documentElement;
var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
$("#GB_window").css(
    width: GB_WIDTH + "px",
    height: GB_HEIGHT + "px",
    left: ((w - GB_WIDTH) / 2) + "px"
);
$("#GB_frame").css("height", GB_HEIGHT - 32 + "px");

这是来自 html 文件的:

    <script type="text/javascript">
  var GB_ANIMATION = true;
  $(document).ready(function()
    $("a.greybox").click(function()
      GB_show(this.title || $(this).text() || this.href,this.href,470,600);
      return false;
    );
  );
</script>

对不起,如果这很多:/

【问题讨论】:

【参考方案1】:

使用这一行代替append("&lt;iframe&gt;....");

$("<div id='GB_frame'></div>").appendTo("#GB_window").load(url);

它将创建新的div,ID 为GB_iframe,将其附加到GB_window,然后将提供的网址中的内容直接加载到其中。

【讨论】:

它不起作用,我正在尝试创建一个灯箱,所以我要加载的 url 是一个图像文件。我只是不知道该怎么做,当我添加你的代码时,它把我带到了图像文件,但它没有将它注入到页面中。 @ExodusNicholas,嗯,你能提供你正在使用的网址的例子吗? 我在下面的答案中发布了一个如何使用图像文件执行此操作的示例。 :) @Kyle,我不确定他是否想要这样做 :) 他可能想加载整个文档但只从中取出一张图片。【参考方案2】:

如果我理解正确,您想加载 html 文件的内容并使用 ajax 而不是 iframe 将其放置在页面的一部分上?

使用 jQuery 加载方法相当简单。

$("#GB_window").load("url to load from");

这会将您指向的 html 文件的内容放置为 id 为“GB_window”的元素的内容。

编辑

那么,您是在尝试显示图像文件吗?

您需要使用&lt;img&gt; 标签。试试这个:

$("img").attr("src", "url to image").appendTo("#GB_window");

【讨论】:

以上是关于jquery - 如何从我发现的脚本中制作一个 iframe 到 ajax 注入中?的主要内容,如果未能解决你的问题,请参考以下文章

多语言制作插件jQuery.i18n.properties

如何使用jQuery Round Corner插件制作圆角?

如何使用 jquery 删除输入数据?

如何解决jquery“解析器错误”

如何确保Magento 2中的RequireJS在加载其他脚本之前加载jQuery?我发现嵌套需要解决这个问题

如何使用 jQuery 的 $.ajax() 函数来运行 php 脚本? [复制]