Как масштабировать изображение внутри iframe с помощью css

this - одна из неправильно понятых концепций в JavaScript, потому что она ведет себя совсем не так, как с места на место. Просто this ссылается на «владельца» функции, которую мы сейчас выполняем.

this помогает получить текущий объект (контекст выполнения a.k.a.), с которым мы работаем. Если вы понимаете, в каком объекте выполняется текущая функция, вы можете легко понять, что текущий this is

var val = "window.val"

var obj = {
    val: "obj.val",
    innerMethod: function () {
        var val = "obj.val.inner",
            func = function () {
                var self = this;
                return self.val;
            };

        return func;
    },
    outerMethod: function(){
        return this.val;
    }
};

//This actually gets executed inside window object 
console.log(obj.innerMethod()()); //returns window.val

//Breakdown in to 2 lines explains this in detail
var _inn = obj.innerMethod();
console.log(_inn()); //returns window.val

console.log(obj.outerMethod()); //returns obj.val

Выше мы создаем 3 переменные с одинаковым именем «val». Один в глобальном контексте, один внутри obj и другой внутри innerMethod obj. JavaScript разрешает идентификаторы в определенном контексте, поднимая цепочку областей действия из локального глобального.


Несколько мест, где this можно дифференцировать

Вызов метода объекта

var status = 1;
var helper = {
    status : 2,
    getStatus: function () {
        return this.status;
    }
};

var theStatus1 = helper.getStatus(); //line1
console.log(theStatus1); //2

var theStatus2 = helper.getStatus;
console.log(theStatus2()); //1

Когда line1, JavaScript устанавливает контекст выполнения (EC) для вызова функции, устанавливая this объекту, на который ссылается все, что было до последнего «.». поэтому в последней строке вы можете понять, что a() был выполнен в глобальном контексте, который является window.

С конструктором

this можно использовать для ссылки на создаваемый объект

function Person(name){
    this.personName = name;
    this.sayHello = function(){
        return "Hello " + this.personName;
    }
}

var person1 = new Person('Scott');
console.log(person1.sayHello()); //Hello Scott

var person2 = new Person('Hugh');
var sayHelloP2 = person2.sayHello;
console.log(sayHelloP2()); //Hello undefined

Когда выполняется новый Person(), создается совершенно новый объект. Вызывается Person и его this установлен для ссылки на этот новый объект.

Вызов функции

function testFunc() {
    this.name = "Name";
    this.myCustomAttribute = "Custom Attribute";
    return this;
}

var whatIsThis = testFunc();
console.log(whatIsThis); //window

var whatIsThis2 = new testFunc();
console.log(whatIsThis2);  //testFunc() / object

console.log(window.myCustomAttribute); //Custom Attribute 

Если мы пропустим ключевое слово new, whatIsThis ссылается на самый глобальный контекст, он может найти (window)

С обработчиками событий

Если обработчик события является встроенным, this ссылается на глобальный объект




При добавлении обработчика событий через JavaScript, this относится к элементу DOM, который генерирует событие.


1
задан Lynx 13 July 2018 в 16:46
поделиться

1 ответ

Я не думаю, что это возможно сделать CSS iframed на странице. Вам нужно будет добавить отзывчивый CSS на страницу, которую вы пытаетесь встроить. Так как это созданный Google образ, который не кажется вероятным, что у вас будет доступ к этому. То, что вы могли бы попробовать, это просто загрузить изображение и поместить его на квадратный квадрат в качестве изображения, а не iframe.

Я не уверен, что данные изображения являются динамическими, что может повлиять на то, что вы можете делать. Думали ли вы оглядываться на другие графические услуги? Там может быть что-то, что связано с листами Google или если вы знаете javascript достаточно, вы можете создавать свои собственные графики с помощью googles api.

1
ответ дан tec4 17 August 2018 в 12:23
поделиться
  • 1
    Извините, но я думаю, что это невозможно, потому что здесь возникают проблемы с изображением, которое находится в iframe, поэтому мы не можем его стилизовать, если вы можете дать стиль, а затем plz дать встроенный стиль для изображения, такого как max-width: 100%; высота: авто; также в мобильном режиме вам нужно дать min-height iframe, иначе изображение будет выглядеть на маленьком устройстве. – Bharat Makvana 13 July 2018 в 18:01
  • 2
    @ Tec4. Спасибо за ваш ответ. Данные очень динамичны, и я пытаюсь создать веб-страницу, которая всегда будет загружать обновленные номера при загрузке страницы. – Kevin Taylor 16 July 2018 в 20:54
  • 3
    @KevinTaylor Да, в этом случае вам, возможно, придется погрузиться в какой-нибудь Javascript или найти службу, которая привяжет к ней листы Google и позволит вам встраивать динамическую диаграмму в эту службу. – tec4 16 July 2018 в 21:52
Другие вопросы по тегам:

Похожие вопросы: