在 Javascript 中嵌入 Sharepoint Web 部件

Posted 2023-03-27

【中文标题】在 Javascript 中嵌入 Sharepoint Web 部件

【英文标题】：Embedding Sharepoint Web Part in Java Script

【发布时间】：2013-01-22 12:51:54

【问题描述】：

我已经部署了一个共享点网页并添加了一个自定义 Web 部件，它以客户希望的方式可视化数据。 Webpart 的问题是我们无法在用户想要的时候缩放、修改或隐藏它。我们考虑将 Sharepoint webpart 嵌入到 Java 包装器中。通常，这在标准 html 页面上会很容易。问题是如何在 Sharepoint 的 java 包装器中嵌入 webpart？

我想添加 2 个 html 按钮，一个用于显示 webpart，一个用于隐藏 webpart。挑战在于找到我可以传递给任一按钮以执行 hideMe 或 showMe java 脚本的 webpart ID。

webpart 标头：

<WebPartPages:WebPartZone runat="server" Title="loc:FullPage" ID="FullPage" FrameType="TitleBarOnly"><ZoneTemplate>
<WpNs0:Trend runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A" >

代码（到目前为止）

<button onclick="HideWebpart('AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A')">Hide Me</button>
<button onclick="ShowWebpart('AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A')">Show Me</button>

<script>
function HideWebpart(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A)

    var wp=document.getElementById(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A);
    wp.className = "hidden";


function ShowWebpart(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A)

    var wp=document.getElementById(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A);
    wp.className = "";

</script>

【参考方案1】：

好的，您可以给 WebPart 一个 id="mywebpart"，然后简单地使用 javascript 函数来隐藏它。

例子：

<style type="text/css>
    .hidden  display:none; 
</style>
<script>
function HideWebpart(id_of_webpart)

    var wp=document.getElementById(id_of_webpart);
    wp.className = "hidden";


function ShowWebpart(id_of_webpart)

    var wp=document.getElementById(id_of_webpart);
    wp.className = "";

</script>
<WebPartPages:WebPartZone>
..The SVG WebPart... <--Add WebPart with id here
</WebPartPages:WebpartZone>

<button onclick="HideWebpart('PASS WEB PART ID IN HERE')"/>

---

我相信问题是当 getElementById 只查找“id=”属性时，您想使用“__WebPartId=”属性。因此，通过自定义属性查找元素，您将需要使用以下内容而不是 getElementById：

function getElementByAttribute(attr, value, root) 
    root = root || document.body;
    if(root.hasAttribute(attr) && root.getAttribute(attr) == value) 
        return root;
    
    var children = root.children, 
        element;
    for(var i = children.length; i--; ) 
        element = getElementByAttribute(attr, value, children[i]);
        if(element) 
            return element;
        
    

用法：

getElementByAttribute("__WebPartId",'PASS WEB PART ID IN HERE');

注意：它会比 getElementById 慢得多，因为你不能使用任何索引

或者，如果您可以使用 jQuery 库，您可以简单地使用 $('[__WebPartId="PASS WEB PART ID IN HERE"]')

【讨论】：

几乎但是您将函数保留为变量。例如函数 HideWebpart(id_variable) var wp=document.getElementById(id_variable); wp.​​className = "隐藏";

Ok..Elliot，有趣的是我最初询问如何通过代码显示和隐藏 webpart。您给我的答案是不完整的，无法通过用户交互隐藏或显示 Web 部件。 （即没有按钮或链接）我给了你信用，因为你也问过我。让我们再试一次，忍受我。我的问题再次是如何参数化 webpart ID（大概是 __WebPartId="AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A" 以便我的“隐藏”和/或“显示”按钮实际与 Sharepoint 中的 web 部件交互跨度>

lol 很抱歉你错过了理解，我很乐意提供帮助。我的意思是，如果您用目前为止的内容更新您的原始问题，我可以编辑我的答案，为您提供一些更好的代码 sn-ps，然后尝试将代码塞进这个小评论框。

想通了...好吧，所以我在 中“封装”了我的 webpart 并给它一个 ID 然后在我的 js 中没有更好的词调用该 id .. 在我的 js 脚本中，在 和 之间的 .aspx 顶部编写脚本。它实际上对我来说效果更好，因为我可以疯狂地使用一个或多个 webpart 将它们全部包裹在 中，我可以从顶部随意调用。我可以使用 Sharepoint 设计器来进一步掩盖 Web 部件的丑陋之处。谢谢你至少给了我这个想法！ /欢呼