I am new to DOJO and have a requirement where in we need to embed already running website on our new website using an iframe. Both websites will be running on same domain.
I tried using dojo/request/iframe, and am able to see the website in my iframe BUT when clicking on any of the link in embedded website, it opens in another window. But i want it to work in my iframe internally.
Below is the code snippet:
<script>
require(["dojo/request/iframe", "dojo/dom", "dojo/dom-construct"], function(iframe, dom, domConst){
iframe("http://localhost:8080/phpkbv8/", {
handleAs: "html"
}).then(function(data){
var greetingNode = dom.byId('siteInclude');
domConst.place(data.documentElement,greetingNode);
}, function(err){
var greetingNode = dom.byId('siteInclude');
domConst.place('<p>Error Occured!!!</p>' + err,greetingNode);
});
// Progress events are not supported using the iframe provider
});
</script>
Please help me in making it work. Looking for help.
If you are intending to embed an iframe into your page for display/interaction purposes, you shouldn't really be using dojo/request/iframe to do so. If you need to create the iframe programmatically, use DOM APIs or dojo/dom-construct. For example, based on your code above:
domConst.create('iframe', {
src: 'http://localhost:8080/phpkbv8/'
}, greetingNode);
dojo/request/iframe is specifically intended as a transport for sending Ajax requests, in cases where XHR, script injection, etc. aren't sufficient.
Related
I'm creating a POC using google app maker. I plan on using a JS library that has a dependency on Jquery. I've listed JQuery as an "external resource" to start with and added an H1 element on my html with the following code as part of a client script:
$(document).ready(function(){
$("h1").click(function(){
console.log("jquery works");
});
});
When I preview my app and click on the element, nothing is logged. When I inspect the elements, I can see both the Jquery library and the code above, but the event is not triggering when I click on the element. Any suggestions? The ultimate goal is to be able to use https://querybuilder.js.org/ within the app I'm creating.
My best guess is that when you say that you added the code:
$(document).ready(function(){
$("h1").click(function(){
console.log("jquery works");
});
});
to the client script, what you did was created a client script under the SCRIPTS section of App Maker and then added the code there. If that is so, that is why it's not working.
What you need to do is to use client scripting in the widget event handlers. Each widget has event handlers and the HTML widget is not an exception. What I recommend is to add the code to the onAttach event handler of the HTML widget:
}
Also, you can get rid of the document.ready part and just use the code you see in the image above. That should do the trick.
BONUS: If you will be using classes and ids, for it to work you will need to use the allowUnsafeHtml option:
I hope this helps for now. If you need something else, I'll be happy to help you.
I have an iframe within which I open a third party website. Few links in the webpage opens in new tab. How do I override this option and make sure all the links open in the same iframe?
Sample Code
Your browser doesn't support iframes
This code can't be tested on an offline page. You will need to test it within live page
Suppose this is your iframe.
<iframe src='give_your_url_here.com'/>
Put the below code instead of your iframe and replace the variable 'url' with your required url.
This is not a proper method, but this is the only solution to your situation.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="queryResultContainer"/>
<script type="text/javascript">
var url = 'give_your_url_here.com';//without http://
$.getJSON('http://anyorigin.com/go?url=' + url + '&callback=?', function (data) {
var aa = data.contents;
$('#queryResultContainer').html(aa + "<script> setInterval(function () { $('#queryResultContainer').find('a').removeAttr('target');}, 200);</script" + ">");
});
</script>
If your site is HTTPS then change
$.getJSON('http://anyorigin.com....
To
$.getJSON('https://anyorigin.com....
You can't. If the links on the third party website are programmed to open in new windows / tabs, you have no way of modifying that code.
We're using AddThis Social Share functionality with our Sitecore/MVC application. The problem we're facing is that the LinkedIn share always opens in new window. On Inspect, we can see the target=_blank in code, which is not being added in our code.
Any help?
Thanks,
Chandana
The behavior of each share button is as per the website to which the page is being shared. If you test each button (say Facebook, G+, Twitter, LinkedIn, etc.) you will notice that they all work differently. It's not AddThis choice. This is because each website has its own API and that's the way that website decided it would work with their system. LinkedIn happens to open a separate window... Pinterest first opens a popup within your page and then another window after you selected the image you wanted to share. G+ and Facebook open a new tab. And the popups/windows all look quite different, but the users should recognize each respective brand as a result...
I suspect that this is a problem with the AddThis Social Share functionality. To share on LinkedIn, all you need is the following URL format...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Then you can setup your <a href="..."> element however you like, with target="_blank" or not.
Source: Official LinkedIn Sharing Documentation.
Can try out below JavaScript code, which will overwrite addthis functionality, and make linkedIn as popup,
setInterval make sure click event attached to dynamically generated anchor tag
$(document).ready(function () {
var clickinterval = setInterval(setclickevent, 500);
function setclickevent() {
if ($('.at-svc-linkedin').length > 0) {
$('.at-svc-linkedin').on('click', function () {
window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + fixedEncodeURIComponent(window.location.href), 'popup', 'width=600,height=600');
e.preventDefault();
return false;
});
clearInterval(clickinterval);
}
}
function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
return '%' + c.charCodeAt(0).toString(16);
});
}
});
I have an Google apps script and I want to call this Google apps script on my web page?How can I achieve this?This is my Google apps Script code for creating a google doc on my drive.
function createAndSendDocument() {
var doc = DocumentApp.create('Hello World');
doc.appendParagraph('This document was created by my first Google Apps Script.');
doc.saveAndClose();
var url = doc.getUrl();
var emailAddress = Session.getActiveUser().getEmail();
GmailApp.sendEmail(emailAddress,
'Hello '+ url);
}
and I want to call this function when I click on a button on my web page.But I don't know how to call this function on my button click.And one more thing I also save this script and change this version number and deploy as a web app and get the URL of this Google apps Script.
UPDATE: (added incorrectly in an answer)
Actually i am using this line like this.
btnClick.addEventListener("click", function () {
Page.ClientScript.RegisterStartupScript(this.GetType(), "GoogleFunction", "createAndSendDocument()", true);
}
So please now tell me what's wrong in that?When i run my application then it's show me an error like "The Page is not defined".
Look also at this documentation and also this one, everything is clearly explained .
you can add the div and the code in your page as you needed. also you need to add the javascript codes inside your head if it exists.
hi you can use this code on button click after adding a script manager in the form
Page.ClientScript.RegisterStartupScript(this.GetType(),"GoogleFunction","createAndSendDocument()",true);
I have been developing a service that allows users to insert information from my database onto their sites by using iframes. The only problem was that the iframe needs to be resizeable and this is one of the biggest problems with iframes as most people already know, aswell as the fact I can access objects on the parent page from within the iframe and vice versa.
I have thought of making an asp.net web servie to server up the HTML and access it by using a get request. However this also has a problem since these request can only be made from the same domain?
What I need to know is the best way to retrieve a small piece of HTML containing customer reviews from server and display it on their page using some sort of AJAX.
Thanks
if your users can add a < script > line to their site pointing to code on your site, you can fairly easily offer a mechanism to build a floating (and resizable) DIV on their page that you jquery.load() with content from your site ...
example:
"To use my service on your site, add the following line to your < head >"
<script type='text/javascript' src='http://mysite.com/scripts/dataget.js />
then add a link or button anywhere and give it a class 'get-date-from-mysite'
< input type='button' value='Click to see the data' class='get-data-from-mysite' />
--
Then in that script you do (something like):
$(function() {
$('.get-data-from-mysite').click(function() {
$('body').append("<div id='mydiv' 'style=position:absolute; z-index:999; left: ...
$('#mydiv').load(' .... // url that sends html for content
});
...etc
resize-able div stuff needs to be added too
I think the jQuery library might be what you need - specifically, look into jQuery Ajax.
Following on what Scott Evernden is explaining, you can add a <script> tag such as:
<script id="my_script_tag" type='text/javascript' src='http://mysite.com/scripts/dataget.js' />
Inside dataget.js you can simply reference the script tag itself by using its "id" (document.getElementById("my_script_tag");) and replace it (insertBefore()) with relevant data.
To get the data from your server you can use JSONP (lots of stuff on SO as well), which is an ajax technique for cross-domain communication.