I am following Microsoft's tutorial on making metro apps in JavaScript. Link When you click the button, it's supposed to say "Hello nameenetered!" Mine does not do this. I have gone through the code up and down and cannot find a difference. My greetingOutput div will just not display. I changed the code to make the button display greetingOutput, which works, so I know my eventhandler and function are working. Here's my code:
Default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jsHelloWorld</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- jsHelloWorld references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<h1 class="headerClass">Hello World!</h1>
<div class="mainContent">
<p>What's your name?</p>
<input id="nameInput" type="text"></input>
<button id="helloButton">Say "Hello"</button>
<div id="greetingOutput"></div>
<label for="ratingControlDiv">
Rate this Greeting:
</label>
<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
</div>
</div>
</body>
</html>
Default.js
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandler, false);
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function buttonClickHandler(eventInfo) {
var userName = document.getElementById("nameInput").value;
var greetingString = "Hello, " + userName + "!";
document.getElementById("greetingOutput").innertext = greetingString;
helloButton.innerText = greetingOutput.innertext
}
app.start();
})();
default.css
body {
}
.headerClass {
margin-top: 45px;
margin-left: 120px;
}
.mainContent {
margin-top: 31px;
margin-left: 120px;
margin-bottom: 50px;
}
#greetingOutput {
height: 20px;
margin-bottom:
}
javascript is case sensitive, innerText should be written with capital T , try this
document.getElementById("greetingOutput").innerText = greetingString;
....^
and remove this line
helloButton.innerText = greetingOutput.innertext // REMOVE THIS
Related
Background
I've been using Vue 2 for a long time and am currently exploring Vue 3 to see what converting our existing website will entail. Because this is a conversion I plan to use the options interface for Vue 3. For the most part it seems like the conversion should be fairly painless. But I have encountered one Vue3 behavior that I find very puzzling.
Vue 2 Example
In Vue 2 if I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue#2.5.16/dist/vue.min.js"></script>
</head>
<body>
<h1>Vue2 app.variable example</h1>
<!-- vue template -->
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
//Vue2 Example
var app = new Vue({
el: '#appTemplate',
data: {
count: 101
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
});
alert("app.count is:" + app.count)
</script>
</body>
</html>
When the page loads, the alert looks like this:
This demonstrates that after the vue object is created I can access the data properties as though they hang directly off of the vue object. This is as expected since it's documented behavior.
However, Vue 3 Behaves Differently for Me
Here is a block of analogous Vue3 code with a bit of extra code you will probably notice:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.5/dist/vue.global.js"></script>
</head>
<body>
<h1>Vue3 app.variable example</h1>
<!-- vue template -->
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
//Vue3 OptionsAPI
var _app;
var app = Vue.createApp({
data: function() {
return {
count: 101
}
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
}
);
app.mount("#appTemplate");
//It's really odd that we can't access the property this way:
alert("app.count is:" + app.count);
//but this works.
alert("_app.count is:" + _app.count);
</script>
</body>
</html>
When this page loads and the first alert box is shown, app.count is undefined.
To explore this a bit more you can see in the code that I set the value of an _app variable to the value of this in the created method. And I show a 2nd alert on load that displays _app.count. And sure enough that works and displays the correct value:
So that's pretty interesting. Is it by design in Vue 3 data properties can't be accessed directly from the vue object or is something wrong with my code? It seems like a really big change from Vue 2 if it's by design. So I'd like to hope that it's not.
So here is the question: Why can't I access count via app.count after the var app = Vue.createApp ?
In Vue 2, new Vue() returns the root component.
In Vue 3, createApp() returns the application instance, and the root component is returned from the application instance's mount():
var app = Vue.createApp({
data() {
return {
count: 101,
}
}
})
👇
var root = app.mount('#appTemplate')
console.log(root.count) // => 101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.5/dist/vue.global.js"></script>
</head>
<body>
<h1>Vue3 app.variable example</h1>
<!-- vue template -->
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
//Vue3 OptionsAPI
var app = Vue.createApp({
data: function() {
return {
count: 101
}
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
}
);
var root = app.mount("#appTemplate");
alert("root.count is:" + root.count);
</script>
</body>
</html>
Alternatively, you could chain the mount() call off of createApp():
var app = Vue.createApp().mount('#appTemplate')
console.log(app.count) // => 101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.5/dist/vue.global.js"></script>
</head>
<body>
<h1>Vue3 app.variable example</h1>
<!-- vue template -->
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
//Vue3 OptionsAPI
var app = Vue.createApp({
data: function() {
return {
count: 101
}
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
}
).mount("#appTemplate");
alert("app.count is:" + app.count);
</script>
</body>
</html>
You could also access that property before mounting the app :
app._component.data().count
I am not able to figure out why remove tab is not invoked when I use ng-click but it works fine in non Angular way! I referred help available in http://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/how-to/AngularJS/add-new-tabs-dynamically.html.
I have written code in dojo.telerik.com/#datha_k/oNuBI. I'm clueless here, tried a lot, please help.
I think my issue related to this discussion at http://www.telerik.com/forums/use-angularjs-directive-in-tab-content 'The tabstrip widget does not support angularjs binding expressions'. Any work around to suggest?
Hi ,due to some reason i m unable to login in DOJO to edit ur code,below code will work -
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/tabstrip/index">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="app-myapp" ng-controller="my-controller as my">
<button ng-click="newTab($event)">Click to add new tab</button>{{show}}
<hr />
<div kendo-tab-strip="tabstrip" id="tabstrip" k-options="tabOptions"></div>
</div>
<script>
function removeMeNonNg(e) {
e.preventDefault();
e.stopPropagation();
var item = $(e.target).closest(".k-item");
var tabstrip = $("#tabstrip").data("kendoTabStrip");
tabstrip.remove(item.index());
tabstrip.select(0);
}
angular.module("app-myapp", ["kendo.directives"]) // Create module and pass kendo dependency
.controller("my-controller", function ($scope, $timeout) { // Create controller
var index = 1;
$scope.tabOptions = {
dataTextField: "text",
dataContentField: "content",
dataSource: [{
text: index,
content: '<div>Hello World!</div>' + index
}]
}; // tabOptions
$scope.newTab = function newTab(event) {
index++;
$scope.tabstrip.append({
text: index + ' <button onclick="removeMeNonNg(event)">Remove me in non NG!</button> ',
encoded: false,
content: '<div><button ng-click="removeTab(\''+index+'\')">Remove me!</button>Hello World, Again!</div>' + index
});
}; // newtab
$scope.removeTab = function (index) {
$scope.tabstrip.remove(index-1);
};
$timeout(function () {
$("#tabstrip").data("kendoTabStrip").select(0);
}, 50);
});
</script>
</body>
</html>
The problem with your code are 2-
1)Either use jquery or ANgular for components or else u will face anonymous behaviour.I have corrected your code for appending tabs in angular kendo.
2)You have to call ng-click from content attribute and not text attribute of kendo-tabstrip
I am new to the concept of hybrid app development and not used to any of the scripting languages like javascript.
I am trying to access the device phonebook via the cordova contact picker plugin but I am not getting any error nor acheiving the desired functionality.
Here is my view part from where I call the plugin api.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/radio.css" rel="stylesheet">
<!--<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>-->
<!-- ionic/angularjs js -->
<script src="../lib/ionic/js/ionic.bundle.js"></script>
<!-- your app's js -->
<script src="../js/emergency.js"></script>
<script src="../js/services.js"></script>
<script src="../js/ng-cordova.min.js"></script>
</head>
<body ng-app="emergency">
<ion-view title="My Profile - Emergency" ng-controller="SmsCtrl">
<ion-content overflow-scroll="true" padding="true" class="has-header">
<form class="list">
<label class="item item-input">
<span class="input-label"></span><textarea placeholder=""> I am in danger</textarea>
</label>
</form>
<div class="spacer" style="width: 285px; height: 34px;"></div>
<button class="button button-light button-icon button-small icon ion-android-add-circle" ng-click="doContactPicker()">Emergency contacts</button>
<div id="contactFetched"></div>
</ion-content>
</ion-view>
</body>
</html>
The two js files that I have written are emergency.js and services.js
Here is my emergency.js which consists of the controller that calls the contact picker service:-
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var finalContacts="";
var contactCount=0;
angular.module('emergency', ['ionic','ngCordova','NameService'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('SmsCtrl', ['$scope','$ionicPlatform','$cordovaSms','ContactPicker', function ($scope, $ionicPlatform, $cordovaSms, ContactPicker) {
console.log('enetered in ctrl');
$scope.form={}
$scope.counter=contactCount;
/*
calling the contact picker service : ContactPicker which returns the merged contact details of the contacts picked
*/
$scope.doContactPicker=function() {
console.log(ContactPicker);
$scope.answer='answer';
$scope.answer =ContactPicker.pickedContact();
$scope.$watch('answer', function() {
document.getElementById("contactFetched").innerHTML =$scope.answer;
alert('sample alert displayed');
});
};
/*
function to add contact data to the array of items
gentrating new div items on button click
*/
$scope.users = [];
$scope.add = function () {
$scope.users.push({
firstName: "",
email: "",
mobile: ""
});
};
/*
function to send sms using cordova message plugin api
input : form.number and form.message
*/
$scope.sendSms = function(){
console.log($scope.form.number);
console.log($scope.form.message);
var options = {
replaceLineBreaks: false, // true to replace \n by a new line, false by default
android: {
intent: '' // send SMS with the native android SMS messaging
//intent: '' // send SMS without open any other app
}
};
$ionicPlatform.ready(function(){
$cordovaSms
.send($scope.form.number, $scope.form.message, options)
.then(function(result) {
console.log(result);
}, function(error) {
console.log(error);
})
})
}
}]);
And finally the services.js file
var finalContacts="";
var nameService=angular.module('NameService',[]);
nameService.service('getName',function() {
console.log("service created");
this.nameFetched=function getUserName(c) {
console.log("inside picked contact");
var name =c;
return name;
}
});
nameService.service('ContactPicker',function() {
console.log("service created");
this.pickedContact=function() {
console.log("inside picked contact");
//alert("inside");
navigator.contacts.pickContact(function(contact){
//alert("inside");
// console.log('The following contact has been selected:' + JSON.stringify(contact));
//alert(JSON.stringify(contact));
//Build a simple string to display the Contact - would be better in Handlebars
var s = "";
//s += "<h2>"+getName.nameFetched('yatin data')+"</h2>";
if(contact.emails && contact.emails.length) {
s+= "Email: "+contact.emails[0].value+"<br/>";
}
if(contact.phoneNumbers && contact.phoneNumbers.length) {
s+= "Phone: "+contact.phoneNumbers[0].value+"<br/>";
}
if(contact.photos && contact.photos.length) {
s+= "<p><img src='"+contact.photos[0].value+"'></p>";
}
finalContacts+=s;
//$("#selectedContact").html("hello world");
},function(err){
alert('Error: ' + err);
console.log('Error: ' + err);
});
return finalContacts;
}
});
The control breaks on this function call navigator.contacts.pickContact(function(contact){
using ionic serve i tested it on the browser but since the picked contact function would work on the device itself hence I am getting the following error in browser :-
TypeError: Cannot read property 'pickContact' of undefined
But with device debugging option I am not able to reach inside navigator.contacts.pickContact(function(contact){ i.e no alerts inside this are displayed.
Kindly help me resolve this problem.
Thanks
At first, where is the reference to cordova.js? that is:
<script src="cordova.js"></script>
Then, did you installed properly the cordova-plugin-contacts?
Cordova plugins are available only on devices, not in the browser, so you have to install the built app on a device, connect it to your computer and debug via usb (in a way depending on the specific platform iOS/Android/...).
I am not sure if you know that if you want a plugin you need to install it. So to install the plugin you want (cordova-plugin-contacts) you need to install it with cordova. This will add the plugin in your plugins folder in your current project. The plugins folder is in the root of your project. Inside you should see a folder called cordova-plugin-contacts or org.apache.cordova.contacts. Otherwise you should run the command below.
cordova plugin add cordova-plugin-contacts
You can find more info about installing the cordova-plugin-contacts here.
I have implemented a SettingsFlyout. From the view of this flyout, my app collection some info from user (firsname) and want to store it in roaming settings. This information get stored when user clicks a button the settings view and retrieved when in the beforeShow event for the flyout. These two events are setup in the ready function of the SettingsFlyout itself but for some reason I am getting following error.
0x800a138f - JavaScript runtime error: Unable to get property 'winControl' of undefined or null reference
on following line
var divtest = document.getElementById"test").winControl;
Similarly I also get
0x800a138f - JavaScript runtime error: Unable to set property 'onclick' of undefined or null reference.
Do you see anything I am doing wrong causing these issues?
Here is what I have in default.html
app.onsettings = function (e) {
e.detail.applicationcommands = {
"test": {
href: "/pages/settings/test/test.html",
title: "Test"
}
}
WinJS.UI.SettingsFlyout.populateSettings(e);
};
Here is the test.html itself.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/pages/settings/test/test.css" rel="stylesheet" />
<script src="/pages/settings/test/test.js"></script>
</head>
<body>
<div
data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'test', width:'narrow'}">
<div class="win-header">
<div class="win-label">test</div>
</div>
<div class="win-content">
First Name: <input id="firstname" />
<br />
<input type="submit" value="Save" />
</div>
</div>
</body>
</html>
Here is the test.js file.
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/settings/test/test.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
var divtest = document.getElementById("test").winControl;
var firstname = document.getElementById("firstname");
document.getElementById("submit").onclick = function (e) {
//alert('hi');
roamingSettings.values["firstname"] = firstname.value;
}
divtest.addEventListener("beforeshow", function () {
firstname.value = roamingSettings.values["firstname"];
});
},
unload: function () {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in viewState.
}
});
})();
There are no elements that have the id submit or test in your HTML.
The problem may be because this:
var divtest = document.getElementById("test").winControl;
looks for the HTML element with Id=test, it seems that you set
settingsCommandId:'test'
but it's not the same, so is should be:
<div id="test" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'test', width:'narrow'}">
I have an html page. On that page I want to open popup window. I have a link on which I have to click & open new pop up. But, it is not a new browser window. It is AJAX based popup.
I do have used Queness popup & YUI dialog popup.
Now, in that window I want to show an iframe which will display page related to link I have clicked. But, for security point of view, iFrame is not showing that page on popup window, but the control of the page transfers to that page & page gets redirected to that page.
How to make popup steady to show that window ?
Here, I am showing YUI dialog code :
<html>
<head>
<title>Yahoo Dialog !</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/container/container-min.js"></script>
<script type="text/javascript">
document.documentElement.className = "yui-pe";
</script>
<style type="text/css">
#example {
height:30em;
}
label {
display:block;
float:left;
width:45%;
clear:left;
}
.clear {
clear:both;
}
#resp {
margin:10px;
padding:5px;
border:1px solid #ccc;
background:#fff;
}
#resp li {
font-family:monospace
}
.yui-pe .yui-pe-content {
display:none;
}
</style>
<script>
YAHOO.namespace("example.container");
YAHOO.util.Event.onDOMReady(function () {
// Define various event handlers for Dialog
var handleSubmit = function() {
this.submit();
};
var handleCancel = function() {
this.cancel();
};
var handleSuccess = function(o) {
var response = o.responseText;
response = response.split("<!")[0];
document.getElementById("resp").innerHTML = response;
};
var handleFailure = function(o) {
alert("Submission failed: " + o.status);
};
// Remove progressively enhanced content class, just before creating the module
YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");
// Instantiate the Dialog
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
{ width : "60em",
fixedcenter : true,
visible : false,
constraintoviewport : true,
buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
{ text:"Cancel", handler:handleCancel } ]
});
// Validate the entries in the form to require that both first and last name are entered
YAHOO.example.container.dialog1.validate = function() {
var data = this.getData();
if (data.firstname == "" || data.lastname == "") {
alert("Please enter your first and last names.");
return false;
} else {
return true;
}
};
// Wire up the success and failure handlers
YAHOO.example.container.dialog1.callback = { success: handleSuccess,
failure: handleFailure };
// Render the Dialog
YAHOO.example.container.dialog1.render();
YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
//YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
});
</script>
</head>
<body class="yui-skin-sam">
<h1>Dialog Quickstart Example</h1>
<div class="exampleIntro">
<p>The Dialog Control is designed to allow you to retrieve information from the user and make use of that information within the page — whether interally to the page or by sending the information to the server via form post or XMLHttpRequest. This example shows how to do the latter. Click the button to show the Dialog instance and its form fields; fill out the form; submit the form. Dialog will automatically use the YUI Connection Manager to send the data via XMLHttpRequest to the server and will then echo that data back to you on the page.</p>
</div>
<div>
Yahoo Mail !
</div>
<form >
<div id="dialog1" class="yui-pe-content">
<div class="hd">Please enter your information</div>
<div class="bd">
<form method="POST" action="http://developer.yahoo.com/yui/examples/container/assets/post.php">
<div><p class="whitetext">YMail !<br/>
<iframe src ="http://www.stackoverflow.com/" width="750" height="400"><p>Ymail</p></iframe>
</p></div>
</form>
</div>
</div>
</form>
</body>
</html>
This is dialog.html page. But,while loading it, it will transfer to http://stackoverflow.com.
You can change this url from src property of iframe.
You can only do an XMLHTTP request to a page in the same domain. The browser doesn't allow cross domain requests.
To do a cross domain request you need a server page in your domain that can work as a proxy and do the request for you.
Plenty of page authors do not wish their sites to be displayed in frames on other people's sites and take steps to avoid it.
You need to bite the bullet, accept their wishes, and stop trying to frame third party content without permission.