Fatal编程技术网
  • jquery/
  • Jquery SVG元素中嵌入的iframe

Jquery SVG元素中嵌入的iframe

jquery iframe svg

Jquery SVG元素中嵌入的iframe,jquery,iframe,svg,embed,Jquery,Iframe,Svg,Embed,我遇到的问题是，我试图使用jquery将iframe嵌入到svg元素中，但我无法绘制iframe。下面是一个来自堆栈溢出的示例，它与我想要的非常相似，只是想简单地显示一个html片段： 我的jquery代码是这样的 function showTextToolbar(selectedGroup){ console.log("here"); var x = +$($(selectedGroup).children().get(0)).attr("x");

我遇到的问题是，我试图使用jquery将iframe嵌入到svg元素中，但我无法绘制iframe。下面是一个来自堆栈溢出的示例，它与我想要的非常相似，只是想简单地显示一个html片段：

我的jquery代码是这样的

    function showTextToolbar(selectedGroup){
        console.log("here");
        var x = +$($(selectedGroup).children().get(0)).attr("x");
        var y = +$($(selectedGroup).children().get(0)).attr("y") - 30;
        console.log(x);
        console.log(y);
        var newFOSvg = svgEditor.canvas.addSvgElementFromJson({
                "element": "foreignobject",
                "id": "textTool",
                "attr":{
                    "x":x,
                    "y":y,
                    "width":"360",
                    "height":"30"   
                    }
                });
        var newIframeSvg = svgEditor.canvas.addSvgElementFromJson({
            "element": "iframe",
            "attr":{
                "width":"360",
                "height":"30",  
                "src":"http://www.google.com",
                "xmlns":"http://www.w3.org/1999/xhtml"
                }
            });
        newFOSvg.appendChild(newIframeSvg);
        canv.getElem("svgcontent").appendChild(newFOSvg);
    }
基本上，这段代码使用我的几个预构建函数（addSvgElementFromJson）向画布上已经存在的svg根添加元素。我只是用一个虚拟链接看看这个帧是否会出现。在运行时调用该函数时，不会出现错误，svg部分也会正确更新，但不会显示任何内容

以下是使用iframe和几个其他对象更新的svg：

    <svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <g id="0ea5f198be28b719853b18c7390003e7">
         <rect id="svg_1" width="350" height="50" fill="#ffffff" stroke="#22C" stroke-width="0.5" x="20" y="40"/>
      </g>
    </g>
    <foreignobject height="30" width="360" y="10" x="20">
      <iframe xmlns="http://www.w3.org/1999/xhtml" src="http://www.google.com" height="30" width="360"/>
    </foreignobject>
   </svg>


第一层
我似乎已经正确嵌入了iframe，但svg画布上没有显示任何内容。任何帮助都将不胜感激

更新：通过将foreignobject元素移动到初始组中，我可以绘制它，但它是空的。iframe仍不显示。此外，通过创建带有嵌入式iframe的虚拟页面，我可以看到iframe的内容：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Frameset//EN">
     <html>
      <body>
       <iframe src="test.svg" width="600" height="600"></iframe>
      </body>
     </html>
test.svg包含：

    <svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <g id="0ea5f198be28b719853b18c739002923" name="text_free">
       <rect y="40" x="20" stroke-width="0.5" stroke="#22C" fill="#ffffff" height="50" width="350" name="border"/>
       <text y="60" x="40" xml:space="preserve" text-anchor="left" font-family="serif" font-size="12" name="data" opacity="100" stroke-width="0" stroke="#000000" fill="#000000"></text>
     </g>
    <g id="0ea5f198be28b719853b18c7390003e7" name="text_free">
     <rect y="90" x="20" stroke-width="0.5" stroke="#22C" fill="#ffffff" height="50" width="350" name="border"/>
    <text y="110" x="40" xml:space="preserve" text-anchor="left" font-family="serif" font-size="12" name="data" opacity="100" stroke-width="0" stroke="#000000" fill="#000000"></text>
    </g>
   <foreignObject height="500" width="500" y="200" x="70">
    <iframe xmlns="http://www.w3.org/1999/xhtml" src="http://www.google.com" height="500" width="500"/>
   </foreignObject>
 </g>
</svg>


第一层
我最后用我想要的工具栏在页面上浮动了一个div。不需要在svg上为工具栏绘制任何内容。使用浮动div时效果更好

更新-对于那些希望实现我最初目标的人，必须使用jQuery将SVG名称空间的外部对象节点附加到基本SVG

在D3.js中，我能够使用javascript使用xhtml容器将iframe附加到foreignobject

var the_container=the_foreignObject.append("xhtml:body")

var the_iframe.append("iframe")
    .attr("src", function(d) {
        the_url="http://bl.ocks.org/mbostock/raw/1256572";
        return the_url;
    })
    .attr("width", background_width)
    .attr("height", background_height/2)
    .attr("frameborder","0")
;
我的解决办法是一起放弃iframe。由于我在文档中嵌入了一个svg元素，然后又在svg中嵌入了另一个html元素，因此内容似乎被阻止了。对于我的特殊情况，iframe并不是解决我问题的最佳方案。我最终只是用我想要的工具栏在我的页面上浮动了一个div。不需要在svg上为工具栏绘制任何内容。使用浮动div时效果更好。这不是问题所在。如果无法使用Javascript将HTML动态嵌入SVG，请解释原因。如果您不知道，请不要发布带有明显解决方法的答案作为答案。看到我写的问题，我从来没有说过不可能将HTML嵌入SVG，我只是说在我的情况下，这不是最好的解决方案。你读了整篇文章了吗？我举了一个例子，说明了我是如何将iframe嵌入到一个外来对象标记中的。也许在你无意识地否决投票并斥责我的答案之前，你应该阅读整篇文章。我已经阅读了问题和答案，我注意到你在哪里写了这两篇文章的人。然而，尽管您的答案让自己满意，但对于像我这样正在寻找使用javascript将外来对象添加到svg的方法的人来说，这并没有帮助，这就是问题所在。我能够使用jquery嵌入iframe。您所要做的就是为外来对象标记创建一个DOM元素（使用SVG名称空间），并通过您认为合适的任何方法插入到当前文档中。如果您需要更多帮助（包括代码示例），我建议您打开一个新问题。很抱歉，我在评论中批评了您，但我确实发布了将外来对象插入svg元素的代码，回答了您的问题。