如何在Dynamics 365 HTML Web资源中动态替换HTML/CSS内的URL

Got it, let's tackle this problem of replacing fixed URLs in your Dynamics 365 HTML web resource with dynamic ones fetched via JavaScript. Here are a couple of solid approaches you can use:

方法1：动态修改现有CSS类样式 #

If your HTML web resource already includes the CSS with fixed URLs, you can use JavaScript to overwrite those styles after the page loads. This works great if you don't want to restructure your existing CSS.

First, grab the dynamic base URL (note: for newer Dynamics 365 versions, I recommend using the global context instead of Xrm.Page to avoid deprecation issues):

// Get dynamic client URL (recommended for v9+ Dynamics 365)
var baseUrl = Xrm.Utility.getGlobalContext().getClientUrl();
// Or use the original code if you're on an older version:
// var baseUrl = Xrm.Page.context.getClientUrl();

Then you have two sub-options to update the styles:

Option A: Update the CSS rule in the stylesheet #

Perfect if multiple elements use the same .aftertd class:

var imgUrl = baseUrl + "/_imgs/imagestrips/grid_ctrl_imgs.png?ver=-1792584992";

// Loop through all stylesheets to find and update the .aftertd rule
document.styleSheets.forEach(sheet => {
    try {
        Array.from(sheet.cssRules).forEach(rule => {
            if (rule.selectorText === ".aftertd") {
                rule.style.background = `transparent url("${imgUrl}") no-repeat scroll -171px -19px`;
                // Preserve other existing styles like height
                rule.style.height = "14px";
            }
        });
    } catch (e) {
        // Skip cross-origin stylesheets (common in Dynamics 365's default styling)
    }
});

Option B: Apply inline styles directly to elements #

Simpler if you only have a small number of elements using the class:

var imgUrl = baseUrl + "/_imgs/imagestrips/grid_ctrl_imgs.png?ver=-1792584992";

// Target all elements with .aftertd class and update their inline style
document.querySelectorAll(".aftertd").forEach(el => {
    el.style.background = `transparent url("${imgUrl}") no-repeat scroll -171px -19px`;
    el.style.height = "14px";
});

方法2：通过JavaScript注入动态CSS #

If you're open to restructuring your code, define your CSS directly in JavaScript using template literals. This lets you embed the dynamic URL upfront, avoiding post-load style modifications entirely.

var baseUrl = Xrm.Utility.getGlobalContext().getClientUrl();

// Define CSS with dynamic URL embedded
var dynamicCss = `
.aftertd {
    background: transparent url("${baseUrl}/_imgs/imagestrips/grid_ctrl_imgs.png?ver=-1792584992") no-repeat scroll -171px -19px;
    height: 14px;
    /* Add any other styles for this class here */
}

/* Add other CSS classes with dynamic URLs here */
`;

// Create a style element and add it to the page head
var styleElement = document.createElement("style");
styleElement.type = "text/css";
styleElement.textContent = dynamicCss;
document.head.appendChild(styleElement);

关键注意事项 #

• Timing: Ensure your JavaScript runs after the DOM is fully loaded. For form web resources, hook into the form's onLoad event, or wrap your code in window.addEventListener('load', function() { /* your code here */ });.
• Deprecation: Xrm.Page is deprecated in Dynamics 365 v9+. Use Xrm.Utility.getGlobalContext() for better forward compatibility.
• Cross-origin handling: The try/catch block in Option A prevents errors from cross-origin stylesheets (like Dynamics 365's default system styles).

内容的提问来源于stack exchange，提问作者Tony