Как динамически обновить «нестандартные» свойства элемента HTML?

Question

Как я могу динамически обновлять "нестандартные" (не так много случаев) свойства элементов HTML, используя JavaScript, jQuery или Angular?

Я пытался использовать [src]="cvv "(Angular), но это не такне похоже, что мне повезло. Я даже не уверен, что все эти свойства или атрибуты могут динамически обновляться.

Пример: как обновить URL action="" и свойство target вэлемент формы ниже?

<form class="wpwl-form" action="https://test.oppwa.com/v1/checkouts/EB477281A6AA/payment" method="POST" target="card_1270556498138">

А как я могу обновить свойство src для iframe ниже?

<iframe class="wpwl-control" frameborder="0" src="https://test.oppwa.com/v1/pciIframe.html"></iframe>

Answer 1

Добавьте ссылочную переменную в ваш iframe и получите к ней доступ, используя ViewChild в вашем файле ts. Используя эту переменную, вы можете изменять атрибуты.

 <iframe #ifrme style="height: 400px;width:400px" frameborder="0" src="https://test.oppwa.com/v1/pciIframe.html"></iframe>

 ngAfterViewInit(){
    this.ifrme.nativeElement.src= "https://www.niceonecode.com/";
  }

Answer 2

Если вы используете angular, вы не должны использовать тег action в элементе формы, вместо этого вы должны делать это угловым способом. Когда привязка url в src angular будет рассматривать URL как небезопасный URL. Чтобы убедиться, что вы привязываете безопасный URL, вам следуетиспользуйте DomSanitizer , поэтому отметьте URL-адрес как безопасный.

component.ts

 srcUrl: string = "https://www.youtube.com/embed/Fdf5aTYRW0E";
  safeUrl;
  constructor(private sanitizer: DomSanitizer) {
    const url = this.sanitizer.sanitize(SecurityContext.URL, this.safeUrl);
     this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.srcUrl);
  }

Пример

Answer 3

С Angular вы можете привязать свойства HTML к переменной, обновление этой переменной приведет к обновлению свойства. В вашем примере вы должны использовать [action] и [src] вместо action и src.

пример: <iframe class="wpwl-control" frameborder="0" [src]="myIframSrc"></iframe>

Answer 4

Angular:

Свяжите свойство src или любое другое свойство для его динамического обновления. Или используйте строковую интерполяцию.

[src]="variableName"

Строковая интерполяция:

src="{{variableName}}"

Все, что вам нужно, - это автоматически изменить значение переменной в вашей логике и обновить пользовательский интерфейс.

variableName= "http://...."

Примечание. Если вы используете Angular, НЕ управляйте пользовательским интерфейсом с помощью jQuery или JavaScript.

Answer 5

Здесь я не вижу проблем с привязкой угловых свойств, например

<form class="wpwl-form" [action]="url" method="POST" [target]="target"> 

, где url и target - свойства, определенные в component.ts, например

url='https://test.oppwa.com/v1/checkouts/EB477281A6AA/payment';
target='card_1270556498138'

проверьте это демо

Answer 6

Вы можете использовать setAttribute

var b = document.querySelector("button"); 

b.setAttribute("name", "helloButton");

Взято из MDN Web Docs

Вы можете использовать следующие

var form = document.querySelector(".wpwl-form")[0];
var iframe = document.querySelector(".wpwl-control")[0];

form.setAttribute("action", "value for action");
form.setAttribute("target", "value for target");

iframe.setAttribute("src", "value for src");

Нев состоянии проверить, но это должно работать.