Live view functions are used for the following purposes:

  • Getting and setting the Design view mode

  • Getting and setting the Live view mode using the server

  • Getting Live view defaults

  • Getting and setting Live view dependents

  • Viewing the Live view parameters

dom.getDesignViewMode()

Availability

Dreamweaver CS4.

Description

This function gets the view or mode of the Design view. The Design view can be in Classic Editable Design view or Live view.

Arguments

None.

Returns

A string value. Returns live if the mode of the Design view is Live view. Returns editable if the mode of the Design view is Classic Editable Design view.

dom.setDesignViewMode()

Availability

Dreamweaver CS4.

Description

This function turns on the mode of the Design view. For example, the function turns on Live view.

Arguments

mode

  • The mode argument is a string that takes the value live or editable.

Returns

None.

dom.getLiveViewUsingServer()

Availability

Dreamweaver CS4.

Description

This function lets you know whether the current page is previewed using a server.

Arguments

None.

Returns

A Boolean value: true if the current page must be previewed using a server; false otherwise.

dom.setLiveViewUsingServer()

Availability

Dreamweaver CS4.

Description

This function enables you to specify whether a page can be previewed using a server.

Arguments

bool

  • The bool argument is a Boolean value that indicates whether a page can be previewed using a server. If you pass true to this function, the page can be previewed using a server.

Returns

None.

dom.getLiveViewDefaultsToUsingServer()

Availability

Dreamweaver CS4.

Description

This function is used to determine whether the default action is to preview using a server.

Arguments

None.

Returns

A Boolean value. If the default action is to preview a page using a server, the Boolean value is true; false otherwise.

dom.getLiveViewDependentsUsingServer()

Availability

Dreamweaver CS4.

Description

This function is used to determine whether dependent CSS and JavaScript files are requested from the server.

Arguments

None.

Returns

A Boolean value. If the dependent CSS and JavaScript files are requested from the server, the Boolean value is true; false otherwise.

dom.setLiveViewDependentsUsingServer()

Availability

Dreamweaver CS4.

Description

This function is used to specify whether dependent CSS and JavaScript files must be requested from the server.

Arguments

bool

  • A Boolean value that indicates whether the dependent CSS and JavaScript files are requested from the server. If you pass true to this function, the files are requested from the server.

Returns

None.

dom.showLiveViewParamatersDialog()

Availability

Dreamweaver CS4.

Description

This function is used to view the live preview parameters dialog.

Arguments

None

Returns

None.

Description

This function is used to enable the link following functionality for the current document. In the Live view mode, link following allows the user to determine the document behavior when a link is clicked.

Availability

Dreamweaver CS5.

Arguments

bool

A Boolean value that indicates whether the link following functionality should be enabled.

Returns

None.

Availability

Dreamweaver CS5.

Description

This function is used to determine whether the Link following functionality is enabled for the document.

Arguments

None

Returns

bool

A Boolean value that indicates whether the link following functionality is enabled.

dom.isLiveViewBrowsingHomeURI()

Availability

Dreamweaver CS5.

Description

This function is used to detrmine if the URL being viewed in the Live View browser is same as the URL in the main document tab.

Arguments

None

Returns

bool

A Boolean value that indicates whether the Live view mode is enabled. False is returned, if the user has followed a link to another document after invoking the Live View mode.

dreamweaver.findSiteForURI()

Availability

Dreamweaver CS5.

Description

This function is used to determine the site referred by the URI.

Arguments

DWUri

A URI that refers to a local file or a remote site (specified as a file:// path or an http:// link).

Returns

Object

An object that has the site context. The returned object has the following properties:

Property

Description

siteName

The name of the site referred by the URI.

localURI

The DWUri object that represents the URI of the local site. If the URI refers to a remote site, the value of the localURI property will be null.

dom.browser.isCmdEnabled()

Availability

Dreamweaver CS5.

Description

This function is used to determine if a particular browser command is available for use.

Arguments

String

A string representing the browser command.The following table shows the valid command strings:

Property

Description

cut

Denotes if the cut action is allowed while in the browser view.

copy

Denotes if the copy action is allowed while in the browser view.

paste

Denotes if the paste action is allowed while in the browser view.

clear

Denotes if the clear action is allowed while in the browser view.

selectAll

Denotes if the entire content can be selected while in the browser view.

find

Denotes if the find action is allowedwhile in the browser view.

undo

Denotes if the undo action is allowed while in the browser view.

redo

Denotes if the redo action is allowed while in the browser view.

print

Denotes if the print action is allowed while in the browser view.

back

Denotes if the back action is available through the browser’s navigation bar.

forward

Denotes if the forward action is available through the browser’s navigation bar.

stop

Denotes if the stop action is available through the browser’s navigation bar.

refresh

Denotes if the refresh action is available through the browser’s navigation bar.

setURL

Denotes if a URL can be set while in the browser view.

pageNavigationHistory

Denotes if the page navigation history functions are available to use.

The page navigation history functions are: dom.browser.isPageNavigationHistoryEnabled(), dom.browser.enablePageNavigationHistory(), ,dom.browser.getNavigationHistoryItem(), dom.browser.setHomePage(), and dom.browser.getHomePage().

home

Denotes if the home action is available through the browser’s navigation bar.

followLinkContextMenuItem

Denotes if a link can be selected and followed.

Returns

bool

A Boolean value that indicates whether the particular browser command is available for use.

dom.browser.isPageNavigationHistoryEnabled()

Availability

Dreamweaver CS5.

Description

This function is used to determine whether the browser is tracking the pages that the user has viewed.

Arguments

None

Returns

bool

A Boolean value that indicates whether the browser is tracking the pages.

dom.browser.enablePageNavigationHistory()

Availability

Dreamweaver CS5.

Description

This function is used to enable or disable the browser history.

Arguments

bool

A Boolean value that indicates whether the browser history should be enabled or disabled. Specify true for enabling the browser history.

Returns

bool

A Boolean value: true if the operation succeeds.

dom.browser.getPageNavigationHistoryLength()

Availability

Dreamweaver CS5 (deprecated since Dreamweaver CC)

Description

This function is used to determine the number of items in the browser history list.

Arguments

None

Returns

int

An integer representing the number of items in the history list.

dom.browser.getPageNavigationHistoryPosition()

Availability

Dreamweaver CS5 (deprecated since Dreamweaver CC)

Description

This function is used to determine the user’s current position in the browser history list. The current position is usually the value of getPageNavigationHistoryLength()-1 for the most current page. However, if the user has gone back in the history list, the value of the current position changes.

Arguments

None

Returns

int

An integer representing the user’s current position in the browser history list.

dom.browser.goToPageNavigationHistoryPosition()

Availability

Dreamweaver CS5 (deprecated since Dreamweaver CC)

Description

This function is used to instruct the browser to navigate to the given position in the history list.

Arguments

int

An integer representing the position in the browser history list.

Returns

None

dom.browser.getPageNavigationHistoryItem()

Availability

Dreamweaver CS5 (deprecated since Dreamweaver CC)

Description

This function is used to get information on a specific item from the browser history list.

Arguments

int

An integer representing the position in the browser history list.

Returns

Object

An object that has the information about the item in the browser history list. The returned object has the following properties:

Property

Description

uri

The URI used by the browser for the history item. The property type is a DWUri object.

originalUri

The original URI for the history item. The original URI value is usually same as the URI value. The property type is a DWUri object.

title

The title of the page that was viewed. The property type is a String.

isPost

Denotes whether the item will re-post the form data when it loads. The property type is a bool.

dom.browser.setHomePage()

Availability

Dreamweaver CS5.

Description

This function is used to instruct the browser to set a specified URL as the home page.

Arguments

DWUri

A DWUri object that contains the URI information.

Returns

bool

A Boolean value: true if the operation succeeds.

dom.browser.getHomePage()

Availability

Dreamweaver CS5.

Description

This function is used to get the current home page of the browser.

Arguments

None.

Returns

DWUri Object

A DWUri Objectthat contains the URI information.

dom.browser.getSelection()

Availability

Dreamweaver CS4.

Description

This function is used to get the current selection from the browser in Live view.

Arguments

None.

Returns

Returns an array with two offsets for the start and end positions of the selection in the source code.

dom.browser.getStatusText()

Availability

Dreamweaver CS4.

Description

This function is used to get the current status text for the browser. It is usually an empty string or the string "loading file …".

Arguments

None.

Returns

Returns text that is displayed in the status area of the chrome of a browser.

dom.browser.getWindow()

Availability

Dreamweaver CS4.

Description

This function is used to get the window object for the browser control. You can access the browser document object model from the window object.

Arguments

None.

Returns

Returns an object.

dom.browserEle.loadHTML()

Availability

Dreamweaver CS4.

Description

This function loads an HTML string directly into the browser control. This function is useful if you have HTML strings ready to go. The HTML strings must not be associated with a document.

Arguments

None.

Returns

None.

dom.browser.interactivityPaused

Availability

Dreamweaver CS4.

Description

This property enables you to know whether interactivity is enabled.

Arguments

None.

Returns

A Boolean value: true if interactivity is enabled; false otherwise.

dom.browser.javaScriptEnabled

Availability

Dreamweaver CS4.

Description

This property enables you to know whether JavaScript is enabled. This property works like dom.interactivityPaused(), but only for JavaScripts.

Arguments

None.

Returns

A Boolean value: true if JavaScript is enabled; false otherwise.

You can use this tag in extensible dialogs to display a browser in the dialog. This tag does not have special attributes. You can control the size of the browser window using CSS styling. The DOM object returned by the tag is the same type of object as dom.browser, but it is not the same instance. The dom.browser function does not work in commands, you must get the browser object in the DOM. An example of the tag is:

<mm:browsercontol id="myBrowser" style="width: 500px; height:300px;" />

At the head of the document, you must have a script that looks like the following:

var browserEle = document.getElementById("myBrowser"); 
alert(browserEle.getWindow().document.documentElement.outerHTML);

The browser control also broadcasts two special events:

BrowserControlLoad

This event is called immediately after the browser has called its load event so that you can attach your own elements to the loaded browser DOM.

BrowserControlBeforeNavigation

This event is called when the browser is about to go to a new page. If the event is canceled, the navigation request is also canceled and the browser control remains on its current page. The event context also contains the requested URL.

The following example illustrates the functionality of these events: var browserEle = document.getElementById("myBrowser"); browserEle.addEventListener("BrowserControlBeforeNavigation", function(e){ if (e.requestedLocation = "foo.com") e.preventDefault(); //don't allow navigation to this site!}, true);

var browserEle = document.getElementById("myBrowser"); 
browserEle.addEventListener("BrowserControlBeforeNavigation", 
    function(e){ if (e.requestedLocation = "foo.com") 
                 e.preventDefault(); //don't allow navigation to this site!}, true);

Guidelines for using in Dreamweaver 13.1 and later

Dreamweaver 13.1 and later is integrated with Chromium Embedded Framework (CEF3). Prior to Dreamweaver 13.1, communication between Dreamweaver and<mm:browsercontrol> used to be a synchronous. Since CEF3 is an asynchronous platform, the way Dreamweaver communicates with <mm:browsercontrol> has changed.Now, each instance of <mm:browsercontrol> spawns off new processes called 'Render processes'. These processes are responsible for rendering the content loaded in <mm:browsercontrol>.This document provides guidelines for using <mm:browsercontrol> taking into account the asynchronous nature of communication and multi-process architecture of CEF, while developing your extensions.

Call getWindow in valid scope

Now, the window object is created only when LoadURL or LoadHTML is called and completed. So, the window object of Live view is to be accessed only after BrowserControlLoad event is triggered. (This event is triggered when the Live View browser is ready).Note: Calling "getWindow" function before the browser is ready returns an "undefined" object. During subsequent accesses, the object causes exception in JS execution.

Example:

Prior to Dreamweaver 13.1

function Init_MM_browsercontrol() 
{ 
   var cefBrowser = document.getElementById("liveBrowser"); 
   cefBrowser.openURL("extention.html"); 
   var liveViewWindow = cefBrowser.getWindow();  
   liveViewWindow.initDefaults(); 
}

Dreamweaver 13.1 and later

function OnMMBrowserCtrlLoaded(e) 
{ 
    liveViewWindow = cefBrowser.getWindow(); 
    liveViewWindow.initDefaults(); 
} 
function Init_MM_browsercontrol() 
{ 
  var cefBrowser = document.getElementById("liveBrowser"); 
 
  // Add event listener is mandatory to know when the browser is ready. 
  cefBrowser.addEventListener("BrowserControlLoad", OnMMBrowserCtrlLoaded,false); 
  cefBrowser.openURL("extention.html"); 
}

Passing/accessing larger objects across bridging

Passing or accessing larger objects through JS-bridge can be a performance overhead. This can also cause failures especially when there are size limitations for copying objects across processes.The following example shows how this can be handled:

Example:

Prior to Dreamweaver 13.1

Consider the media query dialog box.

DW code (Commands\Media Query Manager.js): 
gBrowserCtrl = document.getElementById("browserCtrl"); 
... 
... 
gBrowserCtrl.getWindow().parentWindow = window; // DON'T DO THIS 
In <mm:browsercontrol> code, parentWindow is used to invoke a function called "onClickGridRow". 
<tr id='row_UNIQUE_ID' class='gridRow' onclick='parentWindow.onClickGridRow(UNIQUE_ID)'> 
    <td><div id='row_UNIQUE_ID_description' class='gridDescCol'></div></td> 
    <td><div id='row_UNIQUE_ID_mediaQuery' class='gridMediaQueryCol'></div></td> 
    <td width='100%'><div id='row_UNIQUE_ID_cssFile'></div></td> 
</tr>

Dreamweaver 13.1 and later

DW code: 
gBrowserCtrl.getWindow().SetParentWindowOnClickGridRow( window.onClickGridRow); 
mm:browsercontrol code: 
function SetParentWindowOnClickGridRow(callback) 
{ 
      parentWindowOnClickGridRow = callback; 
} 
<tr id='row_UNIQUE_ID' class='gridRow' onclick='parentWindowOnClickGridRow(UNIQUE_ID)'> 
    ...

Use asynchronous calls

Since CEF3 is a multi-process, asynchronous platform, synchronous APIs are no longer available. Although synchronous calls from Dreamweaver to Render Processes (spawned off by mm:browsercontrol) are simulated, synchronous calls from the Render Processes are not supported.The following examples illustrate how you can change synchronous calls to asynchronous:

Example 1

Assume that the live view content invokes "GetUserName " and use the value populating text element.

Prior to Dreamweaver 13.1

DW code: 
function GetUserName() 
{ 
    return "SomeName"; 
} 
liveViewBrowser = document.getElementById('browser'); 
var liveViewDoc = liveViewBrowser.getWindow().document; 
liveViewDoc.GetUserName = GetUserName; 
Live view browser (<mm:browsercontrol>) code: 
document.getElementById("textelement").innerHTML = document.GetUserName();

Dreamweaver 13.1 and later

DW code: 
function GetUserName(getUserNameCallbackFunction) 
{ 
    getUserNameCallbackFunction("SomeName"); 
} 
liveViewBrowser = document.getElementById('browser'); 
var liveViewDoc = liveViewBrowser.getWindow().document; 
liveViewDoc.GetUserName = GetUserName; 
Live view browser (<mm:browsercontrol>) code: 
function getUserNameResult(str) 
{ 
    document.getElementById("textelement").innerHTML = str; 
} 
document.GetUserName(getUserNameResult);

Note:

Not all synchronous calls can be changed to asynchronous using the approach explained in the example above. In some scenarios, you may have to consider reducing round trips between two processes. See the next example for another approach.

Example 2

In the jquery panel, "loadString" is called from the live view browser (<mm:browsercontrol> Render process) to Dreamweaver. The actual "loadString" JS function just calls dw.loadString to get the localized strings from the resource. As this is a one-time initialization, you can pass all the necessary strings as part of initializing live view browser.

Prior to Dreamweaver 13.1

DW code: 
function loadString(str) 
{ 
    return dw.loadString(str); 
} 
liveViewBrowser = document.getElementById('browser'); 
var liveViewDoc = liveViewBrowser.getWindow().document; 
 
liveViewDoc.loadString = loadString; 
Live view browser (<mm:browsercontrol>) code: 
$("#ButtonTheme h3").eq(0).html(document.loadString("jQSwathc/Floater/ButtonTheme")); 
$("#ButtonTheme h3").eq(1).html(document.loadString("jQSwathc/Floater/ButtonIcon")); 
$("#ButtonTheme h3").eq(2).html(document.loadString("jQSwatch/Floater/Button/IconPos")); 
$("#ListTheme  h3").eq(0).html(document.loadString("jQSwathc/Floater/ListTheme"));

As we can't support synchronized call from liveView to DW, document.loadString("***") will return "undefined" value.This code can be changed as follows:

Dreamweaver 13.1 and later

DW code change: 
function loadString(str){    return dw.loadString(str); } 
 
function InitializeStrings() 
{ 
    var nameArr = new Array("jQSwatch/Floater/AppTheme", 
                            "jQSwathc/Floater/ButtonTheme", 
                            "jQSwathc/Floater/ButtonIcon", 
                            "jQSwatch/Floater/Button/IconPos", .....); 
    var valueArr = new Array(); 
 
 
    for (i=0;i<nameArr.length;i++) 
    { 
        valueArr[i]=loadString(nameArr[i]); 
    } 
 
 
    // One time initialization 
    liveViewBrowser.getWindow().initJQMStrings(nameArr, valueArr); 
} 
 
liveViewBrowser = document.getElementById('browser'); 
//var liveViewDoc = liveViewBrowser.getWindow().document; // Remove this code 
 
 
//liveViewDoc.loadString = loadString; // Remove this Code 
 
 
InitializeStrings(); // One time initialization. 
Live view content (<mm:browsercontrol>) change: 
// Global String Resource Array 
var gLocNameStrArray = new Array(); 
var gLocValStrArray = new Array(); 
function getLocStrVal(str) 
{ 
    var retval; 
    for (i=0;i<gLocNameStrArray.length;i++) 
    { 
        if (gLocNameStrArray[i] == str) 
        { 
            retval = gLocValStrArray[i]; 
            break; 
        } 
    } 
    return retval; 
} 
 
 
// Creates Resource look up array locally. 
 
 
function initJQMStrings(nameArr,valArr) 
{ 
    for (i=0;i<nameArr.length;i++) 
    { 
        gLocNameStrArray[i] = nameArr[i]; 
        gLocValStrArray[i] = valArr[i]; 
    } 
 
    // All loadString call will be processed locally 
    document.loadString = getLocStrVal;  
} 
 
$("#ButtonTheme h3").eq(0).html(document.loadString("jQSwathc/Floater/ButtonTheme")); 
$("#ButtonTheme h3").eq(1).html(document.loadString("jQSwathc/Floater/ButtonIcon")); 
$("#ButtonTheme h3").eq(2).html(document.loadString("jQSwatch/Floater/Button/IconPos")); 
$("#ListTheme  h3").eq(0).html(document.loadString("jQSwathc/Floater/ListTheme"));
Do not modify objects/arrays in incoming arguments

In Dreamweaver 13.1 and later, when an object or array is passed as an argument through a function call to mm:browsercontrol, a local copy of the object/array is created in the corresponding render process. So, when you update the object/array, you only edit the local copy and the original object in Dreamweaver JS layer is not updated. Hence you need to handle such an object modifications through the callback functions as shown below.

Example:

Prior to Dreamweaver 13.1

DW code: 
liveViewBrowser = document.getElementById('browser'); 
liveViewBrowser.getWindow().document.extensionName = "DreamweaverExtension";

Dreamweaver 13.1 and later

DW code: 
liveViewBrowser = document.getElementById('browser'); 
liveViewBrowser.getWindow().SetExtensionName("DreamweaverExtension"); 
Live View (<mm:browsercontrol>) Code: 
function SetExtensionName(name) 
{   
    document.extensionName = name; 
}

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy