I visit a page and displays it to me on such a frame
<iframe src="link" id="pgl" class="surfer_frame" frameborder = "0" onload="showadbar('')"></iframe>
I would like to change the src for a text or another src using Greasemonkey. Anyone knows a way?
I'm not sure if I understand your question correctly. It's too simple.
Just set the src attribute of the <iframe> element to another URL.
change the src for a text or another src
If you want to directly set the content to some text, use srcdoc attribute instead. srcdoc is handled with higher priority over src. You may want to remove the srcdoc attribute in order to subsequently reset the content to some URL source.
To get a reference to the <iframe> element you can use some document methods such as getElementById, querySelector (CSS selectors), evaluate (XPath expressions), aso.
<!-- language: lang-js -->
var
btn,
ifr = document.querySelector('.surfer_frame') // get element reference by class name
;
btn = document.createElement('button'); // generate a test button
btn.innerHTML = 'example.com';
btn.addEventListener('click', function()
{ ifr.removeAttribute('srcdoc'); // remove attribute of higher priority
ifr.setAttribute('src', 'http://example.com'); // set the new content URL
});
document.body.appendChild(btn);
btn = document.createElement('button');
btn.innerHTML = 'text';
btn.addEventListener('click', function()
{ // directly set some content
ifr.setAttribute('srcdoc', '<html><body>Here is some content.</body></html>');
});
document.body.appendChild(btn);
Related
In pug file i have values in "n" i have to pass the values throw the href tag to next page. How to change in href tag. it should be a link not a button.
a(Class=`change_pasword` onclick=`next('${n}')`) Change Password
script.
function next(parmas) {
window.location.href = `/update_password?user_details=${parmas}`
}
How to change the code to href?
You can use just a regular link if you convert the js object to a query string within Pug first.
- const serialize(obj) { ... } // use the formula from the linked answer
a.change_password(href=`/update_password?user_details=${serialize(n)}`) Change Password
I have an SVG loading like this:
<object id="svg-object" type="image/svg+xml" width="1400px" height="900px" data="media/1.svg?"></object>
I then have a function that works calling out one element in this svg and apply a style to it just fine. Here is the onload event that is working for getting me the element properly:
window.onload=function() {
var svgObject = document.getElementById('svg-object').contentDocument;
var element = svgObject.getElementById('sprite1');
};
But how do I set a .hover even in for this same element? I've tried:
$('#${element}').hover(function(e) { }
But no luck.
Also, how can I apply the svgObject variable to a whole class like path or polygon? I use this on a local inline SVG and it works fine:
$("polygon, path").hover(function(e) { }
I would like this to work on the object embedded in the svg also.
Sorry, I am not able to put an external svg in snippet (or at least I don't know how) as external URL will not load in an object. And it needs to load as an object for you to see the issue.
Any help?
Also, here is code that works defining element color from script but mouseover not working either. (tried instead of hover)
window.onload=function() {
var svgObject = document.getElementById('svgEmb').contentDocument;
var element = svgObject.getElementById('left');
element.style.fill = "blue";
element.style.stroke ="blue";
};
element.addEventListener("mouseover", function() {
element.style.fill = "red";
element.style.stroke ="red";
});
I created a custom instanceable portlet, setting the instanceable property to true:
<portlet>
<portlet-name>portletFiltriPTF</portlet-name>
<instanceable>true</instanceable>
<header-portlet-javascript>/js/mediolanumadvice/portletFiltriPTF.js</header-portlet-javascript>
</portlet>
The problem is that I am able to insert the portlet multiple times inside the same page, but only in one of that the content is visible, as you can see in the following image:
Is there anything that I have to do in addition to set that property?
Thank you all,
Marco
Two things to check:
You might have a portlet on page that's (still) non-instanceable because you've added it before you've made your portlet instanceable. They now have different IDs and need to be removed from the page
You might use IDs that are conflicting - e.g. if both portlets create content with the same ID, they'll end up in the DOM. Use these for formatting or any treatment through JS and weird things happen.
I'm not sure if this will help the original poster, but in case anyone else comes across this...
My project is using React and we mount our React root to an element with a static id, referred to as the html root, in index.jsp.
When you try to instantiate multiple instances of the same portlet on one page, subsequent instances will not render because there are multiple elements with the same id.
The solution for this is to create an instance id of your own and create a new element to replace the html root, so that the html root becomes something of a placeholder. Since the html element is removed every time you add a portlet instance, you can reliably mount your React root multiple times without issue.
Here you can see a util I wrote to create a unique root and replace the placeholder (I call it RootUtil):
export default {
makeId: function(length) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < length; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
},
renderRoot: function(placeholderId) {
// create unique id
var instanceId = this.makeId(10);
var id = "react-root-instance-" + instanceId;
// create unique root
var root = document.createElement("div");
root.setAttribute("id", id);
// find placeholder
const placeholder = document.getElementById(placeholderId);
// replace placeholder
//placeholder.replaceWith(root); **breaks in IE**
placeholder.parentElement.replaceChild(root, placeholder); //workaround
// return the new element
return document.getElementById(id);
}}
And I call it here:
ReactDOM.render(
<Provider store={Store}>
<div>
...
</div>
</Provider>,
RootUtil.renderRoot("html-root"));
<script type="text/javascript">
//add an entry to the _spBodyOnLoadFunctionNames array
//so that our function will run on the pageLoad event
_spBodyOnLoadFunctionNames.push("rewriteLinks");
function rewriteLinks() {
//create an array to store all the anchor elements in the page
var anchors = document.getElementsByTagName("a");
//loop through the array
for (var x=0; x<anchors.length; x++) {
//does this anchor element contain #openinnewwindow?
if (anchors[x].outerHTML.indexOf('#openinnewwindow')>0) {
//store the HTML for this anchor element
oldText = anchors[x].outerHTML;
//rewrite the URL to remove our test text and add a target instead
newText = oldText.replace(/#openinnewwindow/,'" target="_blank');
//write the HTML back to the browser
anchors[x].outerHTML = newText;
}
}
}
</script>
I have this code I put in the seattle.master file before Then in quick launch when I edit links I put #openinnewwindow after the website address. On "try link" this opens the website right. My problem is when I save it. And click the link it does not open in a new window. Any ideas why this might be happening?
I realized for this code to work that I needed Publishing enabled.
How do you access html controls inside an iframe from javascript in CRM?
I have:
var height = document.getElementById("IFRAME_TransactionProduct_RA").contentWindow.document.getElementById("txt").value;
but that results in "Error on page" and the content is not loaded.
The element I want to access is an html input with id of 'txt':
<input id="txt" type="hidden" />
Here's an example how you copy a value from a CRM field to a control in an embedded HTML control in an IFRAME. I'm assuming the names of the web resource and the field. You'll have to adapt those. You also might throw in a try-catch in case CRM throws in en exception (got the joke?) and please mind that I'm typing the code on my phone so there might be a typo somewhere (auto-correction, yey).
var source = Xrm.Page.data.entity.attributes.get("oneCoolField")
var information = source.getValue();
var customHtml = Xrm.Page.ui.controls.get("WebResource_EmbeddedHtmlContent");
var destination = customHtml.getObject().contentWindow.document;
if(destination) {
var customControl = destination.getElementById("elementToAccess");
if(customControl) {
customControl.value = information;
}
}
EDIT:
This gets you to the web resource.
var customHtml = Xrm.Page.ui.controls.get("WebResource_EmbeddedHtmlContent");
This gets you to the DOM of the IFRAME.
var destination = customHtml.getObject().contentWindow.document;
This gets you to the control on the custom page.
var customControl = destination.getElementById("elementToAccess");
This gets you the contents of the control.
var contents = customControl.innerHTML;
Which part fails on your computer?
With jQuery:
$(Xrm.Page.ui.controls.get('IFRAME_TransactionProduct_RA').getObject()).contents().find('#txt').val();
Pure JS:
Xrm.Page.ui.controls.get('IFRAME_TransactionProduct_RA').getObject().contentWindow.document.getElementById('txt').value;
http://msdn.microsoft.com/en-us/library/gg334266.aspx#BKMK_getObject