Property
Last updated on
Apr 27, 2021
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.
dom.setLiveViewFollowsLinks()
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.
dom.getLiveViewFollowsLinks()
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:
|
|
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. |
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;
}
